<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="utf-8"><title>Angular - 模板语法</title><meta name="Description" content="Angular is a platform for building mobile and desktop web applications.
    Join the community of millions of developers who build compelling user interfaces with Angular."><base href="/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="search" type="application/opensearchdescription+xml" href="assets/opensearch.xml"><link rel="icon" type="image/x-icon" href="assets/images/favicons/favicon.ico"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-194x194.png" sizes="194x194"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-16x16.png" sizes="16x16"><link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link href="assets/fonts/Material_Icons.css" rel="stylesheet"><link href="assets/fonts/Droid_Sans_Mono.css" rel="stylesheet"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="manifest" href="pwa-manifest.json"><meta name="theme-color" content="#1976d2"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="translucent"><script async="" src="assets/js/analytics.js"></script><script>!function(e,a,n,t,s,c,g){e.GoogleAnalyticsObject=s,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(n),g=a.getElementsByTagName(n)[0],c.async=1,c.src="assets/js/analytics.js",~e.name.indexOf("NG_DEFER_BOOTSTRAP")||g.parentNode.insertBefore(c,g)}(window,document,"script",0,"ga")</script><script>window.onerror=function(){ga("send","exception",{exDescription:function(e,r,n,a,c){var l;e=e.replace(/^Error: /,""),l=c?c.stack.replace(/^Error: /,"").replace(e+"\n","").replace(/^ +/gm,"").replace(/^at /gm,"").replace(/(?: \(|@)http.+\/([^/)]+)\)?(?:\n|$)/gm,"@$1\n").replace(/ *\(eval code(:\d+:\d+)\)(?:\n|$)/gm,"@???$1\n"):r+":"+(n=n||"?")+":"+(a=a||"?");return(e+"\n"+l).substr(0,150)}.apply(null,arguments),exFatal:!0})}</script><link rel="stylesheet" href="styles.4adbe52ad34df01b5273.css"><style>.cdk-high-contrast-active .mat-toolbar{outline:solid 1px}.mat-toolbar-row,.mat-toolbar-single-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%}.mat-toolbar-multiple-rows{min-height:64px}.mat-toolbar-row,.mat-toolbar-single-row{height:64px}@media(max-width:599px){.mat-toolbar-multiple-rows{min-height:56px}.mat-toolbar-row,.mat-toolbar-single-row{height:56px}}</style><style>.mat-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;height:24px;width:24px}.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}[dir=rtl] .mat-icon-rtl-mirror{transform:scale(-1,1)}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon{display:block}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon{margin:auto}</style><style>.mat-button .mat-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{opacity:0}.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:.04}@media(hover:none){.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:0}}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-button[disabled],.mat-flat-button[disabled],.mat-icon-button[disabled],.mat-stroked-button[disabled]{cursor:default}.mat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-button.cdk-program-focused .mat-button-focus-overlay,.mat-flat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-flat-button.cdk-program-focused .mat-button-focus-overlay,.mat-icon-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-icon-button.cdk-program-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-raised-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-raised-button::-moz-focus-inner{border:0}.mat-raised-button[disabled]{cursor:default}.mat-raised-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-raised-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-raised-button::-moz-focus-inner{border:0}._mat-animation-noopable.mat-raised-button{transition:none;animation:none}.mat-stroked-button{border:1px solid currentColor;padding:0 15px;line-height:34px}.mat-stroked-button .mat-button-focus-overlay,.mat-stroked-button .mat-button-ripple.mat-ripple{top:-1px;left:-1px;right:-1px;bottom:-1px}.mat-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab::-moz-focus-inner{border:0}.mat-fab[disabled]{cursor:default}.mat-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-fab{transition:none;animation:none}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab::-moz-focus-inner{border:0}.mat-mini-fab[disabled]{cursor:default}.mat-mini-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-mini-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-mini-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-mini-fab{transition:none;animation:none}.mat-mini-fab .mat-button-wrapper{padding:8px 0;display:inline-block;line-height:24px}.mat-icon-button{padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%}.mat-icon-button .mat-icon,.mat-icon-button i{line-height:24px}.mat-button-focus-overlay,.mat-button-ripple.mat-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-button-ripple.mat-ripple:not(:empty){transform:translateZ(0)}.mat-button-focus-overlay{opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable .mat-button-focus-overlay{transition:none}.cdk-high-contrast-active .mat-button-focus-overlay{background-color:#fff}.cdk-high-contrast-black-on-white .mat-button-focus-overlay{background-color:#000}.mat-button-ripple-round{border-radius:50%;z-index:1}.mat-button .mat-button-wrapper>*,.mat-fab .mat-button-wrapper>*,.mat-flat-button .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-mini-fab .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*,.mat-stroked-button .mat-button-wrapper>*{vertical-align:middle}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button{display:block;font-size:inherit;width:2.5em;height:2.5em}.cdk-high-contrast-active .mat-button,.cdk-high-contrast-active .mat-fab,.cdk-high-contrast-active .mat-flat-button,.cdk-high-contrast-active .mat-icon-button,.cdk-high-contrast-active .mat-mini-fab,.cdk-high-contrast-active .mat-raised-button{outline:solid 1px}</style><style>.mat-drawer-container{position:relative;z-index:1;box-sizing:border-box;-webkit-overflow-scrolling:touch;display:block;overflow:hidden}.mat-drawer-container[fullscreen]{top:0;left:0;right:0;bottom:0;position:absolute}.mat-drawer-container[fullscreen].mat-drawer-container-has-open{overflow:hidden}.mat-drawer-container.mat-drawer-container-explicit-backdrop .mat-drawer-side{z-index:3}.mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,.mat-drawer-container.ng-animate-disabled .mat-drawer-content,.ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,.ng-animate-disabled .mat-drawer-container .mat-drawer-content{transition:none}.mat-drawer-backdrop{top:0;left:0;right:0;bottom:0;position:absolute;display:block;z-index:3;visibility:hidden}.mat-drawer-backdrop.mat-drawer-shown{visibility:visible}.mat-drawer-transition .mat-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}.cdk-high-contrast-active .mat-drawer-backdrop{opacity:.5}.mat-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.mat-drawer-transition .mat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.mat-drawer{position:relative;z-index:4;display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}.cdk-high-contrast-active .mat-drawer,.cdk-high-contrast-active [dir=rtl] .mat-drawer.mat-drawer-end{border-right:solid 1px currentColor}.cdk-high-contrast-active .mat-drawer.mat-drawer-end,.cdk-high-contrast-active [dir=rtl] .mat-drawer{border-left:solid 1px currentColor;border-right:none}.mat-drawer.mat-drawer-side{z-index:2}.mat-drawer.mat-drawer-end{right:0;transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer{transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer.mat-drawer-end{left:0;right:auto;transform:translate3d(-100%,0,0)}.mat-drawer-inner-container{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.mat-sidenav-fixed{position:fixed}</style><style>.nav-link.highlight[_ngcontent-ng-docs-c30]{color:#ff0}</style><style>.mat-progress-bar{display:block;height:4px;overflow:hidden;position:relative;transition:opacity 250ms linear;width:100%}._mat-animation-noopable.mat-progress-bar{transition:none;animation:none}.mat-progress-bar .mat-progress-bar-element,.mat-progress-bar .mat-progress-bar-fill::after{height:100%;position:absolute;width:100%}.mat-progress-bar .mat-progress-bar-background{width:calc(100% + 10px)}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-background{display:none}.mat-progress-bar .mat-progress-bar-buffer{transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-buffer{border-top:solid 5px;opacity:.5}.mat-progress-bar .mat-progress-bar-secondary{display:none}.mat-progress-bar .mat-progress-bar-fill{animation:none;transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-fill{border-top:solid 4px}.mat-progress-bar .mat-progress-bar-fill::after{animation:none;content:"";display:inline-block;left:0}.mat-progress-bar[dir=rtl],[dir=rtl] .mat-progress-bar{transform:rotateY(180deg)}.mat-progress-bar[mode=query]{transform:rotateZ(180deg)}.mat-progress-bar[mode=query][dir=rtl],[dir=rtl] .mat-progress-bar[mode=query]{transform:rotateZ(180deg) rotateY(180deg)}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-fill,.mat-progress-bar[mode=query] .mat-progress-bar-fill{transition:none}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary,.mat-progress-bar[mode=query] .mat-progress-bar-primary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-translate 2s infinite linear;left:-145.166611%}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-primary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary,.mat-progress-bar[mode=query] .mat-progress-bar-secondary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-translate 2s infinite linear;left:-54.888891%;display:block}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-secondary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=buffer] .mat-progress-bar-background{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-background-scroll 250ms infinite linear;display:block}.mat-progress-bar._mat-animation-noopable .mat-progress-bar-background,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-buffer,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary.mat-progress-bar-fill::after{animation:none;transition:none}@keyframes mat-progress-bar-primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes mat-progress-bar-primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes mat-progress-bar-secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:scaleX(.72796)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-background-scroll{to{transform:translateX(-8px)}}</style><script charset="utf-8" src="toc-toc-module-es2015.f8531f591ee147aebcc6.js"></script><script charset="utf-8" src="default~code-code-example-module~code-code-tabs-module-es2015.9efcc76d2979a2e605e0.js"></script><script charset="utf-8" src="code-code-example-module-es2015.fa05e6f700453813d256.js"></script><script charset="utf-8" src="live-example-live-example-module-es2015.d3b124043392e69f9e97.js"></script><script charset="utf-8" src="assets-js-prettify-js-es2015.ba856648f2dd2d930a9b.js"></script></head><body><aio-shell ng-version="9.0.0-rc.11" class="aio-notification-hide folder-guide mode-stable page-guide-template-syntax sidenav-open view-SideNav"><div id="top-of-page"></div><mat-toolbar color="primary" class="mat-toolbar app-toolbar no-print mat-primary mat-toolbar-multiple-rows"><mat-toolbar-row class="mat-toolbar-row notification-container"><aio-notification notificationid="survey-february-2019" expirationdate="2019-03-01" class="ng-tns-c22-0 ng-trigger ng-trigger-hideAnimation" style="height:0"><span class="content ng-tns-c22-0"><a href="http://bit.ly/angular-survey-2019" target="_blank" class="ng-tns-c22-0"><mat-icon role="img" svgicon="insert_comment" aria-label="Announcement" class="mat-icon notranslate icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon><span class="message"><b>填写这份《一分钟调查》</b>，帮我们（开发组）做得更好！</span><span class="action-button">去填写</span></a></span><button mat-icon-button="" aria-label="Close" class="close-button ng-tns-c22-0 mat-icon-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="close" aria-label="Dismiss notification" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round"></div><div class="mat-button-focus-overlay"></div></button></aio-notification></mat-toolbar-row><mat-toolbar-row class="mat-toolbar-row"><button mat-button="" title="Docs menu" class="hamburger mat-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="menu" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple"></div><div class="mat-button-focus-overlay"></div></button><a href="/" class="nav-link home"><img src="assets/images/logos/angular/logo-nav@2x.png" width="150" height="40" title="Home" alt="Home" class="ng-star-inserted"></a><aio-top-menu _nghost-ng-docs-c30="" class="ng-star-inserted"><ul _ngcontent-ng-docs-c30="" role="navigation"><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="features" title="特性" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">特性</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="docs" title="文档" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">文档</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="resources" title="资源" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">资源</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="events" title="会议" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">会议</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="https://blog.wangke.io/" title="译者汪志成的博客，包括翻译文章和原创文章" target="_blank"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">译者博客</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="translations/cn/home" title="关于中文版" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">关于中文版</span></a></li></ul></aio-top-menu><aio-search-box class="search-container"><input type="search" aria-label="search" placeholder="搜索"></aio-search-box><div class="toolbar-external-icons-container"><a href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter"><mat-icon role="img" svgicon="logos:twitter" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 50 59" xmlns="http://www.w3.org/2000/svg"><path d="M50,9.3c-1.8,0.8-3.8,1.4-5.9,1.6c2.1-1.3,3.7-3.3,4.5-5.7c-2,1.2-4.2,2-6.5,2.5c-1.9-2-4.5-3.2-7.5-3.2c-5.7,0-10.3,4.6-10.3,10.3c0,0.8,0.1,1.6,0.3,2.3C16.1,16.7,8.5,12.6,3.5,6.4c-0.9,1.5-1.4,3.3-1.4,5.2c0,3.6,1.8,6.7,4.6,8.5C5,20,3.4,19.6,2,18.8c0,0,0,0.1,0,0.1c0,5,3.5,9.1,8.2,10.1c-0.9,0.2-1.8,0.4-2.7,0.4c-0.7,0-1.3-0.1-1.9-0.2c1.3,4.1,5.1,7,9.6,7.1c-3.5,2.8-7.9,4.4-12.7,4.4c-0.8,0-1.6,0-2.4-0.1c4.5,2.9,9.9,4.6,15.7,4.6c18.9,0,29.2-15.6,29.2-29.2c0-0.4,0-0.9,0-1.3C46.9,13.2,48.6,11.4,50,9.3z"></path></svg></mat-icon></a><a href="https://github.com/angular/angular" title="GitHub" aria-label="Angular on github"><mat-icon role="img" svgicon="logos:github" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 51.8 50.4" xmlns="http://www.w3.org/2000/svg"><path d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3C51.5,11.7,40.1,0.2,25.9,0.2z"></path></svg></mat-icon></a></div></mat-toolbar-row></mat-toolbar><mat-sidenav-container role="main" class="mat-drawer-container mat-sidenav-container sidenav-container mat-drawer-transition has-floating-toc"><div class="mat-drawer-backdrop ng-star-inserted"></div><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav tabindex="-1" class="mat-drawer mat-sidenav sidenav ng-tns-c18-1 ng-trigger ng-trigger-transform mat-drawer-side ng-star-inserted mat-drawer-opened" style="transform:none;visibility:visible"><div class="mat-drawer-inner-container ng-tns-c18-1"><aio-nav-menu class="ng-tns-c18-1"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="docs" title="Angular 文档简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="通过构建第一个 Angular 应用来学习基础知识" aria-pressed="false"><span>快速上手</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start" title="介绍 Angular 的组件模型、模板语法和组件通讯" target="_self"><span>你的第一个应用</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/routing" title="介绍如何使用浏览器的 URL 在组件之间进行路由" target="_self"><span>路由</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/data" title="介绍服务以及如何访问外部数据" target="_self"><span>管理数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/forms" title="学习如何使用表单从用户那里获取并管理数据" target="_self"><span>表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/deployment" title="通过你的应用放到 Firebase 或自己的服务器上来把它分享给外界" target="_self"><span>部署</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="guide/setup-local" title="使用 Angular CLI 搭建本地开发环境简介" target="_self"><span>搭建环境</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 expanded selected ng-star-inserted" title="Angular 的基本原理" aria-pressed="true"><span>基本原理</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 expanded selected"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="介绍 Angular 应用中的一些基本概念。" aria-pressed="false"><span>Angular 的基本概念</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture" title="Angular 应用中的基本构造块。" target="_self"><span>基本概念简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-modules" title="关于 Angular 模块（NgModules）。" target="_self"><span>模块简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-components" title="关于组件、模板和视图。" target="_self"><span>组件简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-services" title="关于服务与依赖注入。" target="_self"><span>服务与 DI 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-next-steps" title="超越基础阶段。" target="_self"><span>后续步骤</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="英雄指南是这里大量 Angular 范例的基础" aria-pressed="false"><span>英雄指南</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial" title="《英雄指南》教程简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt0" title="创建应用的外壳" target="_self"><span>应用的“外壳”</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt1" title="第一部分：构建一个简单的英雄编辑器" target="_self"><span>1. 英雄编辑器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt2" title="第二部分：构建一个主从结构的页面，用于展现英雄列表。" target="_self"><span>2. 显示英雄列表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt3" title="第三部分：把主从结构的视图重构成几个独立的组件。" target="_self"><span>3. 创建特性组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt4" title="第四部分：创建一个可复用的服务来管理英雄数据。" target="_self"><span>4. 添加服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt5" title="第五部分：添加 Angular 路由器，并且学习在视图之间导航。" target="_self"><span>5. 添加应用内导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt6" title="第六部分：通过 HTTP 来获取并保存英雄数据。" target="_self"><span>6. 从服务器获取数据</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 expanded selected ng-star-inserted" title="通过数据绑定构建动态视图" aria-pressed="true"><span>组件与模板</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 expanded selected"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/displaying-data" title="属性绑定可以帮助应用把数据显示在界面上" target="_self"><span>显示数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 expanded selected ng-star-inserted" style="position:relative" href="guide/template-syntax" title="学习如何写模板，以便借助数据绑定机制显示数据并响应事件。" target="_self"><span>模板语法</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/user-input" title="用户输入会触发 DOM 事件。Angular 会通过事件绑定来监听那些事件，并把修改后的值传回应用的组件和模型中。" target="_self"><span>用户输入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lifecycle-hooks" title="Angular 调用指令和组件的生命周期钩子函数，包括它的创建、变更和销毁时。" target="_self"><span>生命周期钩子</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-interaction" title="在不同的指令和组件之间共享信息" target="_self"><span>组件交互</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-styles" title="添加专属于某个组件的样式" target="_self"><span>组件样式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-component-loader" title="动态加载组件" target="_self"><span>动态组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/elements" title="把组件转换成自定义元素" target="_self"><span>Angular 元素</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/attribute-directives" title="属性型指令把行为添加到现有元素上。" target="_self"><span>属性型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/structural-directives" title="结构型指令可以操纵页面的布局" target="_self"><span>结构型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/pipes" title="管道可以在模板中转换显示的内容。" target="_self"><span>管道</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 的表单" aria-pressed="false"><span>表单</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms-overview" title="表单可以创建集中、高效、引人注目的输入体验。Angular 表单可以协调一组数据绑定控件，跟踪变更，验证输入，并表达错误信息。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reactive-forms" title="使用 FormBuilder、表单组和表单数组创建响应式表单。" target="_self"><span>响应式表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms" title="使用指令和 Angular 模板语法创建模板驱动表单。" target="_self"><span>模板驱动表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/form-validation" title="验证用户的表单输入" target="_self"><span>表单验证</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-form" title="使用 FormGroup 渲染动态表单。" target="_self"><span>动态表单</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Observable 与 RxJS" aria-pressed="false"><span>Observable 与 RxJS</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables" title="" target="_self"><span>可观察对象(Observable)</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/rx-library" title="" target="_self"><span>RxJS 库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables-in-angular" title="" target="_self"><span>Angular 中的可观察对象</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/practical-observable-usage" title="" target="_self"><span>用法实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/comparing-observables" title="" target="_self"><span>与其它技术的比较</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 中的模块" aria-pressed="false"><span>NgModules</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodules" title="使用 NgModule 让你的应用更高效" target="_self"><span>NgModule 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-vs-jsmodule" title="JavaScript 模块和 NgModule 之间的差异" target="_self"><span>JS 模块 vs NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/bootstrapping" title="告诉 Angular 如何在根 &quot;AppModule&quot; 中构造和引导应用。" target="_self"><span>应用的根模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/frequent-ngmodules" title="介绍最常用的 NgModule" target="_self"><span>常用模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/module-types" title="介绍特性模块的几种类型" target="_self"><span>特性模块的分类</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/entry-components" title="关于 Angular 中入口组件的一切" target="_self"><span>入口组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/feature-modules" title="创建特性模块，以组织你的代码" target="_self"><span>特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/providers" title="服务提供者与 NgModule" target="_self"><span>服务提供者</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/singleton-services" title="创建单例服务" target="_self"><span>单例服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lazy-loading-ngmodules" title="惰性加载模块，以提高应用的性能" target="_self"><span>惰性加载的特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/sharing-ngmodules" title="共享 NgModule 让你的应用现代化。" target="_self"><span>共享 NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-api" title="理解 NgModule 的那些细节。" target="_self"><span>NgModule API</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-faq" title="回答关于 NgModules 的常见问题。" target="_self"><span>NgModule 常见问题</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="依赖注入：创建并注入各种服务。" aria-pressed="false"><span>依赖注入</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection" title="Angular 的依赖注入系统能够为 Angular 创建的类创建并交付它们所依赖的服务。" target="_self"><span>Angular 依赖注入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/hierarchical-dependency-injection" title="与组件树平行的注入器树，并支持嵌套的依赖。" target="_self"><span>多级注入器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-providers" title="各种提供者类型的更多知识。" target="_self"><span>DI 提供者</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-in-action" title="依赖注入的使用技巧" target="_self"><span>DI 实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-navtree" title="使用注入器树来查找父组件。" target="_self"><span>浏览组件树</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/http" title="通过 HTTP 协议与远程服务器对话。" target="_self"><span>HttpClient</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/router" title="揭示如何通过 Angular 路由进行基本的屏幕导航。" target="_self"><span>路由与导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 动画系统指南" aria-pressed="false"><span>动画</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/animations" title="Angular 动画的基础技术。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/transition-and-triggers" title="转场与触发器的高级技术。" target="_self"><span>转场与触发器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/complex-animation-sequences" title="复杂的 Angular 动画序列。" target="_self"><span>复杂序列</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reusable-animations" title="创建可复用的动画。" target="_self"><span>可复用动画</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/route-animations" title="为路由提供转场动画。" target="_self"><span>路由转场动画</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="把 Angular 用到你的实际工作中的一些技巧" aria-pressed="false"><span>其它技术</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/security" title="Angular 应用开发中的安全技术。" target="_self"><span>安全</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/i18n" title="把应用模板中的文本翻译成多种语言。" target="_self"><span>国际化（i18n）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/accessibility" title="设计能被所有用户访问的应用" target="_self"><span>无障碍（a11y）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular Service Worker: 控制应用资源的缓存。" aria-pressed="false"><span>Service Worker 与 PWA</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-intro" title="Angular 对 Service Worker 的实现提升了慢速或不稳定的网络连接下的用户体验。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-getting-started" title="在 CLI 项目中启用 Service Worker，并在浏览器中查看效果。" target="_self"><span>快速上手</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/app-shell" title="在 CLI 项目中启用应用外壳。" target="_self"><span>应用外壳</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-communications" title="那些能让你和 Angular 的 Service Worker 通讯的服务类。" target="_self"><span>与 Service Worker 通讯</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-devops" title="使用 Service Worker 运行应用、管理应用更新、调试以及杀掉正在运行的应用。" target="_self"><span>生产环境下的 Service Worker</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-config" title="配置 Service Worker 的缓存行为。" target="_self"><span>Service Worker 配置</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/universal" title="使用 Angular Universal 在服务端渲染 HTML。" target="_self"><span>服务端渲染</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="把 AngularJS 应用增量式的升级到 Angular。" aria-pressed="false"><span>从 AngularJS 升级</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade" title="把 AngularJS 应用增量式的升级到 Angular。" target="_self"><span>升级步骤</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade-performance" title="用更灵活的方式把 AngularJS 升级到 Angular。" target="_self"><span>更关注性能的升级方式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ajs-quick-reference" title="学习如何把 AngularJS 的概念映射到 Angular 中。" target="_self"><span>AngularJS 与 Angular 的概念对照</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="使用共享库扩展 Angular" aria-pressed="false"><span>开发 Angular 库</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/libraries" title="理解何时以及如何使用和创建库。" target="_self"><span>库概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/using-libraries" title="把已发布的库集成进你的应用中。" target="_self"><span>使用已发布的库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/creating-libraries" title="通过创建、发布和使用你自己的库来扩展 Angular。" target="_self"><span>创建库</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解原理图" aria-pressed="false"><span>原理图（Schematic）</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics" title="理解 Angular 如何使用原理图。" target="_self"><span>原理图概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-authoring" title="理解原理图的结构。" target="_self"><span>制作原理图</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-for-libraries" title="使用原理图来把你的库集成进 Angular CLI 中。" target="_self"><span>库的原理图</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cli-builder" title="使用构建器定制 Angular CLI。" target="_self"><span>CLI 构建器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/web-worker" title="在 Angular CLI 中使用 Web Worker。" target="_self"><span>Web Worker</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="关于构建、测试和部署的信息" aria-pressed="false"><span>开发工作流</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解 AOT 预先编译器。" aria-pressed="false"><span>AOT 预先编译器</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-compiler" title="学习为何以及如何使用预先编译器。" target="_self"><span>预先编译</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/angular-compiler-options" title="配置 AOT 编译。" target="_self"><span>Angular 编译器选项</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-metadata-errors" title="解决 AOT 编译错误。" target="_self"><span>AOT 元数据错误</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-typecheck" title="Angular 中的模板类型检查。" target="_self"><span>模板类型检查</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/build" title="构建应用及为应用启动开发服务器。" target="_self"><span>构建与运行</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/bazel" title="如何配置你的环境，以利用 Bazel 进行构建和测试。" target="_self"><span>使用 Bazel 进行构建</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/testing" title="测试 Angular 应用的技巧与实践。" target="_self"><span>测试</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deployment" title="了解如何部署 Angular 应用。" target="_self"><span>发布</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="与开发环境和工具集成起来" aria-pressed="false"><span>开发工具集成</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/language-service" title="使用 Angular 语言服务加速开发。" target="_self"><span>语言服务</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="工作空间与项目的结构，及其配置文件。" aria-pressed="false"><span>配置</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/file-structure" title="Angular 工作区在文件系统中是怎样的。" target="_self"><span>项目文件结构</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/workspace-config" title="&quot;angular.json&quot; 包含供 CLI 命令使用的工作区和项目默认配置。" target="_self"><span>工作区配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/npm-packages" title="开发期间和运行期间所需的 npm 包的说明。" target="_self"><span>npm 包</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/typescript-configuration" title="给 Angular 开发者的 TypeScript 配置。" target="_self"><span>TypeScript 配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/browser-support" title="浏览器支持与腻子脚本指南。" target="_self"><span>浏览器支持</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 的版本发布实践、更新与升级。" aria-pressed="false"><span>发布信息</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating" title="如何把 Angular 应用和库升级到最新版本。" target="_self"><span>保持最新</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/releases" title="Angular 的版本、发布、支持、弃用策略及实践。" target="_self"><span>发布实践</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating-to-version-9" title="支持把你的应用从 8 升级到 9。" target="_self"><span>升级到第 9 版</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deprecations" title="弃用的 Angular API 和特性汇总。" target="_self"><span>弃用清单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/ivy" title="关于 Angular Ivy 的编译与渲染管道。" target="_self"><span>Angular Ivy</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 语法、编码、术语汇总。" aria-pressed="false"><span>快捷手册</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cheatsheet" title="关于 Angular 常用编码技术的快速指南。" target="_self"><span>速查表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/styleguide" title="写出 Angular 风格的程序" target="_self"><span>风格指南</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/glossary" title="Angular 中最重要的词汇的简要定义。" target="_self"><span>词汇表</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular CLI 命令参考手册。" aria-pressed="false"><span>CLI 命令</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli" title="CLI 工具介绍、命令、语法" target="_self"><span>概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/usage-analytics-gathering" title="管理员如何从用户那里收集使用情况分析。" target="_self"><span>使用情况分析</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/add" title="ng add." target="_self"><span>ng add</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/analytics" title="ng analytics." target="_self"><span>ng analytics</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/build" title="ng build." target="_self"><span>ng build</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/config" title="ng config." target="_self"><span>ng config</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/deploy" title="ng deploy." target="_self"><span>ng deploy</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/doc" title="ng doc." target="_self"><span>ng doc</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/e2e" title="ng e2e." target="_self"><span>ng e2e</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/generate" title="ng generate." target="_self"><span>ng generate</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/help" title="ng help." target="_self"><span>ng help</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/lint" title="ng lint." target="_self"><span>ng lint</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/new" title="ng new." target="_self"><span>ng new</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/run" title="ng run." target="_self"><span>ng run</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/serve" title="ng serve." target="_self"><span>ng serve</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/test" title="ng test." target="_self"><span>ng test</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/update" title="ng update." target="_self"><span>ng update</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/version" title="ng version." target="_self"><span>ng version</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/xi18n" title="ng xi18n." target="_self"><span>ng xi18n</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="api" title="关于 Angular 中类和值的详细信息。" target="_self"><span>API 参考手册</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><div class="mat-divider ng-star-inserted" style="margin:4px 20px;border-top:1px solid #d3d3d3"></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://github.com/ng-docs/ng-docs.github.io/issues" title="github 上的中文互助问答区" target="_blank"><span>互助问答</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://material.angular.cn" title="Angular Material 组件库的中文文档" target="_blank"><span>官方 Material 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.ant.design/" title="Ant Design 的 Angular 实现，服务于企业级后台产品。" target="_blank"><span>ng-zorro 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://devui.design/" title="“华为云” 开源的企业级组件库，核心设计思想是：致简、沉浸、灵活" target="_blank"><span>华为 DevUI 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.mobile.ant.design/" title="Ant Design Mobile 的 Angular 实现，服务于无线产品。" target="_blank"><span>ng-zorro mobile 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://flutter.cn/" title="Flutter 中文文档站" target="_blank"><span>友站：Flutter 中文</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item></aio-nav-menu><div class="doc-version ng-tns-c18-1"><aio-select><div class="form-select-menu"><button class="form-select-button"><span><strong></strong></span><span>stable (v9.0.0)</span></button></div></aio-select></div></div></mat-sidenav><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav-content cdkscrollable="" class="mat-drawer-content mat-sidenav-content ng-star-inserted" style="margin-left:261px"><main role="main" class="sidenav-content" id="guide-template-syntax"><aio-mode-banner></aio-mode-banner><aio-doc-viewer class=""><div style="opacity:1"><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/aio/content/guide/template-syntax.md?message=docs%3A%20请简述你的修改..." aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a></div><div class="content"><h1 id="template-syntax" translation-result="on">模板语法<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#template-syntax"><i class="material-icons">link</i></a></h1><aio-toc class="embedded" ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-heading embedded secondary ng-star-inserted" aria-pressed="false">目录<mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon collapsed mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><ul class="toc-list embedded"><li class="h2 ng-star-inserted" title="模板中的 HTML"><a href="guide/template-syntax#html-in-templates">模板中的 HTML</a></li><li class="h2 ng-star-inserted" title="插值与模板表达式"><a href="guide/template-syntax#interpolation-and-template-expressions">插值与模板表达式</a></li><li class="h3 ng-star-inserted" title="插值 {{...}}"><a href="guide/template-syntax#interpolation-">插值 <code>{{...}}</code></a></li><li class="h3 secondary ng-star-inserted" title="模板表达式"><a href="guide/template-syntax#template-expressions">模板表达式</a></li><li class="h3 secondary ng-star-inserted" title="表达式上下文"><a href="guide/template-syntax#expression-context">表达式上下文</a></li><li class="h3 secondary ng-star-inserted" title="表达式使用指南"><a href="guide/template-syntax#expression-guidelines">表达式使用指南</a></li><li class="h2 secondary ng-star-inserted" title="模板语句"><a href="guide/template-syntax#template-statements">模板语句</a></li><li class="h3 secondary ng-star-inserted" title="语句上下文"><a href="guide/template-syntax#statement-context">语句上下文</a></li><li class="h3 secondary ng-star-inserted" title="语句指南"><a href="guide/template-syntax#statement-guidelines">语句指南</a></li><li class="h2 secondary ng-star-inserted" title="绑定语法：概览"><a href="guide/template-syntax#binding-syntax-an-overview">绑定语法：概览</a></li><li class="h3 secondary ng-star-inserted" title="数据绑定与 HTML"><a href="guide/template-syntax#data-binding-and-html">数据绑定与 HTML</a></li><li class="h3 secondary ng-star-inserted" title="HTML attribute 与 DOM property 的对比"><a href="guide/template-syntax#html-attribute-vs-dom-property">HTML attribute 与 DOM property 的对比</a></li><li class="h2 secondary ng-star-inserted" title="绑定类型与绑定目标"><a href="guide/template-syntax#binding-types-and-targets">绑定类型与绑定目标</a></li><li class="h2 secondary ng-star-inserted" title="Property 绑定 [property]"><a href="guide/template-syntax#property-binding-property">Property 绑定 <code>[property]</code></a></li><li class="h3 secondary ng-star-inserted" title="单向输入"><a href="guide/template-syntax#one-way-in">单向<em>输入</em></a></li><li class="h3 secondary ng-star-inserted" title="例子"><a href="guide/template-syntax#examples">例子</a></li><li class="h3 secondary ng-star-inserted" title="绑定目标"><a href="guide/template-syntax#binding-targets">绑定目标</a></li><li class="h3 secondary ng-star-inserted" title="消除副作用"><a href="guide/template-syntax#avoid-side-effects">消除副作用</a></li><li class="h3 secondary ng-star-inserted" title="返回正确的类型"><a href="guide/template-syntax#return-the-proper-type">返回正确的类型</a></li><li class="h3 secondary ng-star-inserted" title="别忘了方括号"><a href="guide/template-syntax#remember-the-brackets">别忘了方括号</a></li><li class="h3 secondary ng-star-inserted" title="一次性字符串初始化"><a href="guide/template-syntax#one-time-string-initialization">一次性字符串初始化</a></li><li class="h3 secondary ng-star-inserted" title="属性绑定与插值"><a href="guide/template-syntax#property-binding-vs-interpolation">属性绑定与插值</a></li><li class="h3 secondary ng-star-inserted" title="内容安全"><a href="guide/template-syntax#content-security">内容安全</a></li><li class="h2 secondary ng-star-inserted" title="attribute、class 和 style 绑定"><a href="guide/template-syntax#attribute-class-and-style-bindings">attribute、class 和 style 绑定</a></li><li class="h3 secondary ng-star-inserted" title="attribute 绑定"><a href="guide/template-syntax#attribute-binding">attribute 绑定</a></li><li class="h3 secondary ng-star-inserted" title="类绑定"><a href="guide/template-syntax#class-binding">类绑定</a></li><li class="h3 secondary ng-star-inserted" title="样式绑定"><a href="guide/template-syntax#style-binding">样式绑定</a></li><li class="h3 secondary ng-star-inserted" title="样式的优先级规则"><a href="guide/template-syntax#styling-precedence">样式的优先级规则</a></li><li class="h3 secondary ng-star-inserted" title="委托优先级较低的样式"><a href="guide/template-syntax#delegating-to-styles-with-lower-precedence">委托优先级较低的样式</a></li><li class="h2 secondary ng-star-inserted" title="事件绑定 (event)"><a href="guide/template-syntax#event-binding-event">事件绑定 <code>(event)</code></a></li><li class="h3 secondary ng-star-inserted" title="目标事件"><a href="guide/template-syntax#target-event">目标事件</a></li><li class="h3 secondary ng-star-inserted" title="$event 和事件处理语句"><a href="guide/template-syntax#event-and-event-handling-statements"><em>$event</em> 和事件处理语句</a></li><li class="h3 secondary ng-star-inserted" title="使用 EventEmitter 实现自定义事件"><a href="guide/template-syntax#custom-events-with-eventemitter">使用 <code>EventEmitter</code> 实现自定义事件</a></li><li class="h3 secondary ng-star-inserted" title="模板语句有副作用"><a href="guide/template-syntax#template-statements-have-side-effects">模板语句有副作用</a></li><li class="h2 secondary ng-star-inserted" title="双向绑定 [(...)]"><a href="guide/template-syntax#two-way-binding-">双向绑定 <code>[(...)]</code></a></li><li class="h3 secondary ng-star-inserted" title="双向绑定的基础知识"><a href="guide/template-syntax#basics-of-two-way-binding">双向绑定的基础知识</a></li><li class="h3 secondary ng-star-inserted" title="表单中的双向绑定"><a href="guide/template-syntax#two-way-binding-in-forms">表单中的双向绑定</a></li><li class="h2 secondary ng-star-inserted" title="内置指令"><a href="guide/template-syntax#built-in-directives">内置指令</a></li><li class="h3 secondary ng-star-inserted" title="内置属性型指令"><a href="guide/template-syntax#built-in-attribute-directives">内置属性型指令</a></li><li class="h3 secondary ng-star-inserted" title="NgClass"><a href="guide/template-syntax#ngclass"><code>NgClass</code></a></li><li class="h3 secondary ng-star-inserted" title="NgStyle"><a href="guide/template-syntax#ngstyle"><code>NgStyle</code></a></li><li class="h3 secondary ng-star-inserted" title="[(ngModel)] ：双向绑定"><a href="guide/template-syntax#ngmodel-two-way-binding"><code>[(ngModel)]</code> ：双向绑定</a></li><li class="h2 secondary ng-star-inserted" title="内置结构型指令"><a href="guide/template-syntax#built-in-structural-directives">内置<em>结构型</em>指令</a></li><li class="h3 secondary ng-star-inserted" title="NgIf"><a href="guide/template-syntax#ngif">NgIf</a></li><li class="h3 secondary ng-star-inserted" title="NgFor"><a href="guide/template-syntax#ngfor"><code>NgFor</code></a></li><li class="h2 secondary ng-star-inserted" title="NgSwitch 指令"><a href="guide/template-syntax#the-ngswitch-directives"><code>NgSwitch</code> 指令</a></li><li class="h2 secondary ng-star-inserted" title="模板引用变量（ #var ）"><a href="guide/template-syntax#template-reference-variables-var">模板引用变量（ <code>#var</code> ）</a></li><li class="h2 secondary ng-star-inserted" title="输入和输出属性"><a href="guide/template-syntax#input-and-output-properties">输入和输出属性</a></li><li class="h2 secondary ng-star-inserted" title="如何使用 @Input()"><a href="guide/template-syntax#how-to-use-input">如何使用 <code>@Input()</code></a></li><li class="h3 secondary ng-star-inserted" title="在子组件中"><a href="guide/template-syntax#in-the-child">在子组件中</a></li><li class="h3 secondary ng-star-inserted" title="在父组件中"><a href="guide/template-syntax#in-the-parent">在父组件中</a></li><li class="h2 secondary ng-star-inserted" title="如何使用 @Output()"><a href="guide/template-syntax#how-to-use-output">如何使用 <code>@Output()</code></a></li><li class="h3 secondary ng-star-inserted" title="在子组件中"><a href="guide/template-syntax#in-the-child-1">在子组件中</a></li><li class="h3 secondary ng-star-inserted" title="在父组件中"><a href="guide/template-syntax#in-the-parent-1">在父组件中</a></li><li class="h2 secondary ng-star-inserted" title="@Input() 和 @Output() 在一起"><a href="guide/template-syntax#input-and-output-together"><code>@Input()</code> 和 <code>@Output()</code> 在一起</a></li><li class="h2 secondary ng-star-inserted" title="@Input() 和 @Output() 声明"><a href="guide/template-syntax#input-and-output-declarations"><code>@Input()</code> 和 <code>@Output()</code> 声明</a></li><li class="h2 secondary ng-star-inserted" title="为输入和输出指定别名"><a href="guide/template-syntax#aliasing-inputs-and-outputs">为输入和输出指定别名</a></li><li class="h3 secondary ng-star-inserted" title="元数据中的别名"><a href="guide/template-syntax#aliasing-in-the-metadata">元数据中的别名</a></li><li class="h3 secondary ng-star-inserted" title="使用 @Input() / @Output() 装饰器指定别名"><a href="guide/template-syntax#aliasing-with-the-inputoutput-decorator">使用 <code>@Input()</code> / <code>@Output()</code> 装饰器指定别名</a></li><li class="h2 secondary ng-star-inserted" title="模板表达式中的运算符"><a href="guide/template-syntax#template-expression-operators">模板表达式中的运算符</a></li><li class="h3 secondary ng-star-inserted" title="管道运算符（ | ）"><a href="guide/template-syntax#the-pipe-operator-">管道运算符（ <code>|</code> ）</a></li><li class="h3 secondary ng-star-inserted" title="安全导航运算符（ ? ）和空属性路径"><a href="guide/template-syntax#the-safe-navigation-operator----and-null-property-paths">安全导航运算符（ <code>?</code> ）和空属性路径</a></li><li class="h3 secondary ng-star-inserted" title="非空断言运算符（!）"><a href="guide/template-syntax#the-non-null-assertion-operator---">非空断言运算符（<code>!</code>）</a></li><li class="h2 secondary ng-star-inserted" title="内置模板函数"><a href="guide/template-syntax#built-in-template-functions">内置模板函数</a></li><li class="h3 secondary ng-star-inserted" title="类型转换函数 $any()"><a href="guide/template-syntax#the-any-type-cast-function">类型转换函数 <code>$any()</code></a></li><li class="h2 secondary ng-star-inserted" title="模板中的 SVG"><a href="guide/template-syntax#svg-in-templates">模板中的 SVG</a></li></ul><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-more-items embedded material-icons collapsed ng-star-inserted" aria-pressed="false"></button></div></aio-toc><h1 translation-origin="off" id="template-syntax">Template syntax<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#template-syntax"><i class="material-icons">link</i></a></h1><style>h4{font-size:17px!important;text-transform:none!important}.syntax{font-family:Consolas,'Lucida Sans',Courier,sans-serif;color:#000;font-size:85%}h4 .syntax{font-size:100%}</style><p translation-result="on">Angular 应用管理着用户之所见和所为，并通过 Component 类的实例（<em>组件</em>）和面向用户的模板交互来实现这一点。</p><p translation-origin="off">The Angular application manages what the user sees and can do, achieving this through the interaction of a component class instance (the <em>component</em>) and its user-facing template.</p><p translation-result="on">从使用模型-视图-控制器 (MVC) 或模型-视图-视图模型 (MVVM) 的经验中，很多开发人员都熟悉了组件和模板这两个概念。 在 Angular 中，组件扮演着控制器或视图模型的角色，模板则扮演视图的角色。</p><p translation-origin="off">You may be familiar with the component/template duality from your experience with model-view-controller (MVC) or model-view-viewmodel (MVVM). In Angular, the component plays the part of the controller/viewmodel, and the template represents the view.</p><p translation-result="on">这是一篇关于 Angular 模板语言的技术大全。 它解释了模板语言的基本原理，并描述了你将在文档中其它地方遇到的大部分语法。</p><p translation-origin="off">This page is a comprehensive technical reference to the Angular template language. It explains basic principles of the template language and describes most of the syntax that you'll encounter elsewhere in the documentation.</p><p translation-result="on">这里还有很多代码片段用来解释技术点和概念，它们全都在<live-example title="模板语法的现场演练" ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="模板语法的现场演练" href="generated/live-examples/template-syntax/stackblitz.html">模板语法的现场演练</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/template-syntax/template-syntax.zip">下载范例</a></span></span></span></live-example>中。</p><p translation-origin="off">Many code snippets illustrate the points and concepts, all of them available in the<live-example title="Template Syntax Live Code" ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="Template Syntax Live Code" href="generated/live-examples/template-syntax/stackblitz.html">Template Syntax Live Code</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/template-syntax/template-syntax.zip">下载范例</a></span></span></span></live-example>.</p><a id="html"></a><h2 id="html-in-templates" translation-result="on">模板中的 HTML<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#html-in-templates"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="html-in-templates">HTML in templates<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#html-in-templates"><i class="material-icons">link</i></a></h2><p translation-result="on">HTML 是 Angular 模板的语言。几乎所有的 HTML 语法都是有效的模板语法。 但值得注意的例外是 <code>&lt;script&gt;</code> 元素，它被禁用了，以阻止脚本注入攻击的风险。（实际上，<code>&lt;script&gt;</code> 只是被忽略了。） 参见<a href="guide/security">安全</a>页了解详情。</p><p translation-origin="off">HTML is the language of the Angular template. Almost all HTML syntax is valid template syntax. The <code>&lt;script&gt;</code> element is a notable exception; it is forbidden, eliminating the risk of script injection attacks. In practice, <code>&lt;script&gt;</code> is ignored and a warning appears in the browser console. See the <a href="guide/security">Security</a> page for details.</p><p translation-result="on">有些合法的 HTML 被用在模板中是没有意义的。<code>&lt;html&gt;</code>、<code>&lt;body&gt;</code> 和 <code>&lt;base&gt;</code> 元素这个舞台上中并没有扮演有用的角色。剩下的所有元素基本上就都一样用了。</p><p translation-origin="off">Some legal HTML doesn't make much sense in a template. The <code>&lt;html&gt;</code>, <code>&lt;body&gt;</code>, and <code>&lt;base&gt;</code> elements have no useful role. Pretty much everything else is fair game.</p><p translation-result="on">可以通过组件和指令来扩展模板中的 HTML 词汇。它们看上去就是新元素和属性。接下来将学习如何通过数据绑定来动态获取/设置 DOM（文档对象模型）的值。</p><p translation-origin="off">You can extend the HTML vocabulary of your templates with components and directives that appear as new elements and attributes. In the following sections, you'll learn how to get and set DOM (Document Object Model) values dynamically through data binding.</p><p translation-result="on">首先看看数据绑定的第一种形式 —— 插值，它展示了模板的 HTML 可以有多丰富。</p><p translation-origin="off">Begin with the first form of data binding—interpolation—to see how much richer template HTML can be.</p><hr><a id="interpolation"></a><h2 id="interpolation-and-template-expressions" translation-result="on">插值与模板表达式<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#interpolation-and-template-expressions"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="interpolation-and-template-expressions">Interpolation and Template Expressions<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#interpolation-and-template-expressions"><i class="material-icons">link</i></a></h2><p translation-result="on">插值能让你把计算后的字符串合并到 HTML 元素标签之间和属性赋值语句内的文本中。模板表达式则是用来供你求出这些字符串的。</p><p translation-origin="off">Interpolation allows you to incorporate calculated strings into the text between HTML element tags and within attribute assignments. Template expressions are what you use to calculate those strings.</p><p translation-result="on">这个关于插值的<live-example ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="现场演练" href="generated/live-examples/template-syntax/stackblitz.html">现场演练</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/template-syntax/template-syntax.zip">下载范例</a></span></span></span></live-example>演示了本节所讲的全部语法和代码片段。</p><p translation-origin="off">The interpolation<live-example ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="现场演练" href="generated/live-examples/template-syntax/stackblitz.html">现场演练</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/template-syntax/template-syntax.zip">下载范例</a></span></span></span></live-example>demonstrates all of the syntax and code snippets described in this section.</p><h3 id="interpolation-" translation-result="on">插值 <code>{{...}}</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#interpolation-"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="interpolation-">Interpolation <code>{{...}}</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#interpolation-"><i class="material-icons">link</i></a></h3><p translation-result="on">所谓 "插值" 是指将表达式嵌入到标记文本中。 默认情况下，插值会用双花括号 <code>{{</code> 和 <code>}}</code> 作为分隔符。</p><p translation-origin="off">Interpolation refers to embedding expressions into marked up text. By default, interpolation uses as its delimiter the double curly braces, <code>{{</code> and <code>}}</code>.</p><p translation-result="on">在下面的代码片段中，<code>{{ currentCustomer }}</code> 就是插值的例子。</p><p translation-origin="off">In the following snippet, <code>{{ currentCustomer }}</code> is an example of interpolation.</p><code-example path="interpolation/src/app/app.component.html" region="interpolation-example1" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;h3&gt;Current customer: {{ currentCustomer }}&lt;/h3&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h3&gt;</span><span class="pln">Current customer: {{ currentCustomer }}</span><span class="tag">&lt;/h3&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">花括号之间的文本通常是组件属性的名字。Angular 会把这个名字替换为响应组件属性的字符串值。</p><p translation-origin="off">The text between the braces is often the name of a component property. Angular replaces that name with the string value of the corresponding component property.</p><code-example path="interpolation/src/app/app.component.html" region="component-property" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;p&gt;{{title}}&lt;/p&gt; &lt;div&gt;&lt;img src="{{itemImageUrl}}"&gt;&lt;/div&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;p&gt;</span><span class="pln">{{title}}</span><span class="tag">&lt;/p&gt;</span><span class="pln">
</span><span class="tag">&lt;div&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"{{itemImageUrl}}"</span><span class="tag">&gt;&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">在上面的示例中，Angular 计算 <code>title</code> 和 <code>itemImageUrl</code> 属性并填充空白，首先显示一些标题文本，然后显示图像。</p><p translation-origin="off">In the example above, Angular evaluates the <code>title</code> and <code>itemImageUrl</code> properties and fills in the blanks, first displaying some title text and then an image.</p><p translation-result="on">一般来说，括号间的素材是一个<strong>模板表达式</strong>，Angular 先<strong>对它求值</strong>，再把它<strong>转换成字符串</strong>。 下列插值通过把括号中的两个数字相加说明了这一点：</p><p translation-origin="off">More generally, the text between the braces is a <strong>template expression</strong> that Angular first <strong>evaluates</strong> and then <strong>converts to a string</strong>. The following interpolation illustrates the point by adding two numbers:</p><code-example path="interpolation/src/app/app.component.html" region="convert-string" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;!-- "The sum of 1 + 1 is 2" --&gt; &lt;p&gt;The sum of 1 + 1 is {{1 + 1}}.&lt;/p&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">&lt;!-- "The sum of 1 + 1 is 2" --&gt;</span><span class="pln">
</span><span class="tag">&lt;p&gt;</span><span class="pln">The sum of 1 + 1 is {{1 + 1}}.</span><span class="tag">&lt;/p&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">这个表达式可以调用宿主组件的方法，就像下面用的 <code>getVal()</code>：</p><p translation-origin="off">The expression can invoke methods of the host component such as <code>getVal()</code> in the following example:</p><code-example path="interpolation/src/app/app.component.html" region="invoke-method" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;!-- "The sum of 1 + 1 is not 4" --&gt; &lt;p&gt;The sum of 1 + 1 is not {{1 + 1 + getVal()}}.&lt;/p&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">&lt;!-- "The sum of 1 + 1 is not 4" --&gt;</span><span class="pln">
</span><span class="tag">&lt;p&gt;</span><span class="pln">The sum of 1 + 1 is not {{1 + 1 + getVal()}}.</span><span class="tag">&lt;/p&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">Angular 对所有双花括号中的表达式求值，把求值的结果转换成字符串，并把它们跟相邻的字符串字面量连接起来。最后，把这个组合出来的插值结果赋给<strong>元素或指令的属性</strong>。</p><p translation-origin="off">Angular evaluates all expressions in double curly braces, converts the expression results to strings, and links them with neighboring literal strings. Finally, it assigns this composite interpolated result to an <strong>element or directive property</strong>.</p><p translation-result="on">您看上去似乎正在将结果插入元素标签之间，并将其赋值给属性。 但实际上，插值是一种特殊语法，Angular 会将其转换为<em>属性绑定</em>。</p><p translation-origin="off">You appear to be inserting the result between element tags and assigning it to attributes. However, interpolation is a special syntax that Angular converts into a <em>property binding</em>.</p><div class="alert is-helpful"><p translation-result="on">如果你想用别的分隔符来代替 <code>{{</code> 和 <code>}}</code>，也可以通过 <code><a href="api/core/Component" class="code-anchor">Component</a></code> 元数据中的 <a href="api/core/Component#interpolation">interpolation</a> 选项来配置插值分隔符。</p><p translation-origin="off">If you'd like to use something other than <code>{{</code> and <code>}}</code>, you can configure the interpolation delimiter via the <a href="api/core/Component#interpolation">interpolation</a> option in the <code><a href="api/core/Component" class="code-anchor">Component</a></code> metadata.</p></div><h3 id="template-expressions" translation-result="on">模板表达式<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#template-expressions"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="template-expressions">Template expressions<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#template-expressions"><i class="material-icons">link</i></a></h3><p translation-result="on">模板<strong>表达式</strong>会产生一个值，并出现在双花括号 <code>{{ }}</code> 中。 Angular 执行这个表达式，并把它赋值给绑定目标的属性，这个绑定目标可能是 HTML 元素、组件或指令。</p><p translation-origin="off">A template <strong>expression</strong> produces a value and appears within the double curly braces, <code>{{ }}</code>. Angular executes the expression and assigns it to a property of a binding target; the target could be an HTML element, a component, or a directive.</p><p translation-result="on"><code>{{1 + 1}}</code> 中所包含的模板表达式是 <code>1 + 1</code>。 在属性绑定中会再次看到模板表达式，它出现在 <code>=</code> 右侧的引号中，就像这样：<code>[property]="expression"</code>。</p><p translation-origin="off">The interpolation braces in <code>{{1 + 1}}</code> surround the template expression <code>1 + 1</code>. In the property binding, a template expression appears in quotes to the right of the&nbsp;<code>=</code> symbol as in <code>[property]="expression"</code>.</p><p translation-result="on">在语法上，模板表达式与 JavaScript 很像。很多 JavaScript 表达式都是合法的模板表达式，但也有一些例外。</p><p translation-origin="off">In terms of syntax, template expressions are similar to JavaScript. Many JavaScript expressions are legal template expressions, with a few exceptions.</p><p translation-result="on">你不能使用那些具有或可能引发副作用的 JavaScript 表达式，包括：</p><p translation-origin="off">You can't use JavaScript expressions that have or promote side effects, including:</p><ul><li><p translation-result="on">赋值 (<code>=</code>, <code>+=</code>, <code>-=</code>, <code>...</code>)</p><p translation-origin="off">Assignments (<code>=</code>, <code>+=</code>, <code>-=</code>, <code>...</code>)</p></li><li><p translation-result="on"> <code>new</code>、<code>typeof</code>、<code>instanceof</code> 等运算符。</p><p translation-origin="off">Operators such as <code>new</code>, <code>typeof</code>, <code>instanceof</code>, etc.</p></li><li><p translation-result="on">使用 <code>;</code> 或 <code>,</code> 串联起来的表达式</p><p translation-origin="off">Chaining expressions with <code>;</code> or <code>,</code></p></li><li><p translation-result="on">自增和自减运算符：<code>++</code> 和 <code>--</code></p><p translation-origin="off">The increment and decrement operators <code>++</code> and <code>--</code></p></li><li><p translation-result="on">一些 ES2015+ 版本的运算符</p><p translation-origin="off">Some of the ES2015+ operators</p></li></ul><p translation-result="on">和 JavaScript 语法的其它显著差异包括：</p><p translation-origin="off">Other notable differences from JavaScript syntax include:</p><ul><li><p translation-result="on">不支持位运算，比如 <code>|</code> 和 <code>&amp;</code></p><p translation-origin="off">No support for the bitwise operators such as <code>|</code> and <code>&amp;</code></p></li><li><p translation-result="on">新的<a href="guide/template-syntax#expression-operators">模板表达式运算符</a>，例如 <code>|</code>，<code>?.</code> 和 <code>!</code></p><p translation-origin="off">New <a href="guide/template-syntax#expression-operators">template expression operators</a>, such as <code>|</code>, <code>?.</code> and <code>!</code></p></li></ul><h3 id="expression-context" translation-result="on">表达式上下文<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#expression-context"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="expression-context">Expression context<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#expression-context"><i class="material-icons">link</i></a></h3><p translation-result="on">典型的<em>表达式上下文</em>就是这个<strong>组件实例</strong>，它是各种绑定值的来源。 在下面的代码片段中，双花括号中的 <code>recommended</code> 和引号中的 <code>itemImageUrl2</code> 所引用的都是 <code>AppComponent</code> 中的属性。</p><p translation-origin="off">The <em>expression context</em> is typically the <em>component</em> instance. In the following snippets, the <code>recommended</code> within double curly braces and the <code>itemImageUrl2</code> in quotes refer to properties of the <code>AppComponent</code>.</p><code-example path="interpolation/src/app/app.component.html" region="component-context" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;h4&gt;{{recommended}}&lt;/h4&gt; &lt;img [src]="itemImageUrl2"&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h4&gt;</span><span class="pln">{{recommended}}</span><span class="tag">&lt;/h4&gt;</span><span class="pln">
</span><span class="tag">&lt;img</span><span class="pln"> [</span><span class="atn">src</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"itemImageUrl2"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">表达式也可以引用模板中的上下文属性，例如模板输入变量，</p><p translation-origin="off">An expression may also refer to properties of the <em>template's</em> context such as a template input variable,</p><p translation-result="on"><code>let customer</code>，或模板引用变量 <code>#customerInput</code>。</p><p translation-origin="off"><code>let customer</code>, or a template reference variable, <code>#customerInput</code>.</p><code-example path="interpolation/src/app/app.component.html" region="template-input-variable" header="src/app/app.component.html (template input variable)" ng-version="9.0.0-rc.11"><div style="display:none">&lt;ul&gt; &lt;li *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let customer of customers"&gt;{{customer.name}}&lt;/li&gt; &lt;/ul&gt;</div><header class="ng-star-inserted">src/app/app.component.html (template input variable)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html (template input variable)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;ul&gt;</span><span class="pln">
  </span><span class="tag">&lt;li</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let customer of customers"</span><span class="tag">&gt;</span><span class="pln">{{customer.name}}</span><span class="tag">&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;/ul&gt;</span></code>
    </pre></aio-code></code-example><code-example path="interpolation/src/app/app.component.html" region="template-reference-variable" header="src/app/app.component.html (template reference variable)" ng-version="9.0.0-rc.11"><div style="display:none">&lt;label&gt;<a href="api/core/Type" class="code-anchor">Type</a> something: &lt;input #customerInput&gt;{{customerInput.value}} &lt;/label&gt;</div><header class="ng-star-inserted">src/app/app.component.html (template reference variable)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html (template reference variable)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;label&gt;</span><a href="api/core/Type" class="code-anchor"><span class="pln">Type</span></a><span class="pln"> something:
  </span><span class="tag">&lt;input</span><span class="pln"> #</span><span class="atn">customerInput</span><span class="tag">&gt;</span><span class="pln">{{customerInput.value}}
</span><span class="tag">&lt;/label&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">表达式中的上下文变量是由<em>模板变量</em>、指令的<em>上下文变量</em>（如果有）和组件的<em>成员</em>叠加而成的。 如果你要引用的变量名存在于一个以上的命名空间中，那么，模板变量是最优先的，其次是指令的上下文变量，最后是组件的成员。</p><p translation-origin="off">The context for terms in an expression is a blend of the <em>template variables</em>, the directive's <em>context</em> object (if it has one), and the component's <em>members</em>. If you reference a name that belongs to more than one of these namespaces, the template variable name takes precedence, followed by a name in the directive's <em>context</em>, and, lastly, the component's member names.</p><p translation-result="on">上一个例子中就体现了这种命名冲突。组件具有一个名叫 <code>customer</code> 的属性，而 <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> 声明了一个也叫 <code>customer</code> 的模板变量。</p><p translation-origin="off">The previous example presents such a name collision. The component has a <code>customer</code> property and the <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> defines a <code>customer</code> template variable.</p><div class="alert is-helpful"><p translation-result="on">在 <code>{{customer.name}}</code> 表达式中的 <code>customer</code> 实际引用的是模板变量，而不是组件的属性。</p><p translation-origin="off">The <code>customer</code> in <code>{{customer.name}}</code> refers to the template input variable, not the component's property.</p><p translation-result="on">模板表达式不能引用全局命名空间中的任何东西，比如 <code>window</code> 或 <code><a href="api/platform-server/PlatformConfig#document" class="code-anchor">document</a></code>。它们也不能调用 <code>console.log</code> 或 <code>Math.max</code>。 它们只能引用表达式上下文中的成员。</p><p translation-origin="off">Template expressions cannot refer to anything in the global namespace, except <code>undefined</code>. They can't refer to <code>window</code> or <code><a href="api/platform-server/PlatformConfig#document" class="code-anchor">document</a></code>. Additionally, they can't call <code>console.log()</code> or <code>Math.max()</code> and they are restricted to referencing members of the expression context.</p></div><h3 id="expression-guidelines" translation-result="on">表达式使用指南<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#expression-guidelines"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="expression-guidelines">Expression guidelines<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#expression-guidelines"><i class="material-icons">link</i></a></h3><p translation-result="on">当使用模板表达式时，请遵循下列指南：</p><p translation-origin="off">When using template expressions follow these guidelines:</p><ul><li><p translation-result="on"><a href="guide/template-syntax#simplicity">非常简单</a></p><p translation-origin="off"><a href="guide/template-syntax#simplicity">Simplicity</a></p></li><li><p translation-result="on"><a href="guide/template-syntax#quick-execution">执行迅速</a></p><p translation-origin="off"><a href="guide/template-syntax#quick-execution">Quick execution</a></p></li><li><p translation-result="on"><a href="guide/template-syntax#no-visible-side-effects">没有可见的副作用</a></p><p translation-origin="off"><a href="guide/template-syntax#no-visible-side-effects">No visible side effects</a></p></li></ul><h4 id="simplicity" translation-result="on">简单<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#simplicity"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="simplicity">Simplicity<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#simplicity"><i class="material-icons">link</i></a></h4><p translation-result="on">虽然也可以写复杂的模板表达式，不过最好避免那样做。</p><p translation-origin="off">Although it's possible to write complex template expressions, it's a better practice to avoid them.</p><p translation-result="on">属性名或方法调用应该是常态，但偶然使用逻辑取反 <code>!</code> 也是可以的。 其它情况下，应该把应用程序和业务逻辑限制在组件中，这样它才能更容易开发和测试。</p><p translation-origin="off">A property name or method call should be the norm, but an occasional Boolean negation, <code>!</code>, is OK. Otherwise, confine application and business logic to the component, where it is easier to develop and test.</p><h4 id="quick-execution" translation-result="on">快速执行<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#quick-execution"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="quick-execution">Quick execution<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#quick-execution"><i class="material-icons">link</i></a></h4><p translation-result="on">Angular 会在每个变更检测周期后执行模板表达式。 变更检测周期会被多种异步活动触发，比如 Promise 解析、HTTP 结果、定时器时间、按键或鼠标移动。</p><p translation-origin="off">Angular executes template expressions after every change detection cycle. Change detection cycles are triggered by many asynchronous activities such as promise resolutions, HTTP results, timer events, key presses and mouse moves.</p><p translation-result="on">表达式应该快速结束，否则用户就会感到拖沓，特别是在较慢的设备上。 当计算代价较高时，应该考虑缓存那些从其它值计算得出的值。</p><p translation-origin="off">Expressions should finish quickly or the user experience may drag, especially on slower devices. Consider caching values when their computation is expensive.</p><h4 id="no-visible-side-effects" translation-result="on">没有可见的副作用<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#no-visible-side-effects"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="no-visible-side-effects">No visible side effects<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#no-visible-side-effects"><i class="material-icons">link</i></a></h4><p translation-result="on">模板表达式除了目标属性的值以外，不应该改变应用的任何状态。</p><p translation-origin="off">A template expression should not change any application state other than the value of the target property.</p><p translation-result="on">这条规则是 Angular “单向数据流”策略的基础。 永远不用担心读取组件值可能改变另外的显示值。 在一次单独的渲染过程中，视图应该总是稳定的。</p><p translation-origin="off">This rule is essential to Angular's "unidirectional data flow" policy. You should never worry that reading a component value might change some other displayed value. The view should be stable throughout a single rendering pass.</p><p translation-result="on"><a href="https://en.wikipedia.org/wiki/Idempotence">幂等</a>的表达式是最理想的，因为它没有副作用，并且可以提高 Angular 的变更检测性能。 用 Angular 术语来说，幂等表达式总会返回<em>完全相同的东西</em>，除非其依赖值之一发生了变化。</p><p translation-origin="off">An <a href="https://en.wikipedia.org/wiki/Idempotence">idempotent</a> expression is ideal because it is free of side effects and improves Angular's change detection performance. In Angular terms, an idempotent expression always returns <em>exactly the same thing</em> until one of its dependent values changes.</p><p translation-result="on">在单独的一次事件循环中，被依赖的值不应该改变。 如果幂等的表达式返回一个字符串或数字，连续调用它两次，也应该返回相同的字符串或数字。 如果幂等的表达式返回一个对象（包括 <code>Date</code> 或 <code>Array</code>），连续调用它两次，也应该返回同一个对象的<em>引用</em>。</p><p translation-origin="off">Dependent values should not change during a single turn of the event loop. If an idempotent expression returns a string or a number, it returns the same string or number when called twice in a row. If the expression returns an object, including an <code>array</code>, it returns the same object <em>reference</em> when called twice in a row.</p><div class="alert is-helpful"><p translation-result="on">对于 <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code>，这种行为有一个例外。<code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> 具有 <code>trackBy</code> 功能，在迭代对象时它可以处理对象的相等性。详情参见 <a href="guide/template-syntax#ngfor-with-trackby">带 <code>trackBy</code> 的 *ngFor</a>。</p><p translation-origin="off">There is one exception to this behavior that applies to <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code>. <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> has <code>trackBy</code> functionality that can deal with referential inequality of objects when iterating over them. See <a href="guide/template-syntax#ngfor-with-trackby">*ngFor with <code>trackBy</code></a>for details.</p></div><hr><a id="template-statements"></a><h2 id="template-statements" translation-result="on">模板语句<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#template-statements"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="template-statements">Template statements<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#template-statements"><i class="material-icons">link</i></a></h2><p translation-result="on">模板<strong>语句</strong>用来响应由绑定目标（如 HTML 元素、组件或指令）触发的<strong>事件</strong>。 模板语句将在<a href="guide/template-syntax#event-binding">事件绑定</a>一节看到，它出现在 <code>=</code> 号右侧的引号中，就像这样：<code>(event)="statement"</code>。</p><p translation-origin="off">A template <strong>statement</strong> responds to an <strong>event</strong> raised by a binding target such as an element, component, or directive. You'll see template statements in the <a href="guide/template-syntax#event-binding">event binding</a> section, appearing in quotes to the right of the <code>=</code>&nbsp;symbol as in <code>(event)="statement"</code>.</p><code-example path="template-syntax/src/app/app.component.html" region="context-component-statement" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;button (click)="deleteHero()"&gt;Delete hero&lt;/button&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"deleteHero()"</span><span class="tag">&gt;</span><span class="pln">Delete hero</span><span class="tag">&lt;/button&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">模板语句<em>有副作用</em>。 这是事件处理的关键。因为你要根据用户的输入更新应用状态。</p><p translation-origin="off">A template statement <em>has a side effect</em>. That's the whole point of an event. It's how you update application state from user action.</p><p translation-result="on">响应事件是 Angular 中“单向数据流”的另一面。 在一次事件循环中，可以随意改变任何地方的任何东西。</p><p translation-origin="off">Responding to events is the other side of Angular's "unidirectional data flow". You're free to change anything, anywhere, during this turn of the event loop.</p><p translation-result="on">和模板表达式一样，模板<em>语句</em>使用的语言也像 JavaScript。 模板语句解析器和模板表达式解析器有所不同，特别之处在于它支持基本赋值 (<code>=</code>) 和表达式链 (<code>;</code> 和 <code>,</code>)。</p><p translation-origin="off">Like template expressions, template <em>statements</em> use a language that looks like JavaScript. The template statement parser differs from the template expression parser and specifically supports both basic assignment (<code>=</code>) and chaining expressions (with <code>;</code> or <code>,</code>).</p><p translation-result="on">然而，某些 JavaScript 语法仍然是不允许的：</p><p translation-origin="off">However, certain JavaScript syntax is not allowed:</p><ul><li><p translation-result="on"> <code>new</code> 运算符</p><p translation-origin="off"><code>new</code></p></li><li><p translation-result="on">自增和自减运算符：<code>++</code> 和 <code>--</code></p><p translation-origin="off">increment and decrement operators, <code>++</code> and <code>--</code></p></li><li><p translation-result="on">操作并赋值，例如 <code>+=</code> 和 <code>-=</code></p><p translation-origin="off">operator assignment, such as <code>+=</code> and <code>-=</code></p></li><li><p translation-result="on">位运算符 <code>|</code> 和 <code>&amp;</code></p><p translation-origin="off">the bitwise operators <code>|</code> and <code>&amp;</code></p></li><li><p translation-result="on"><a href="guide/template-syntax#expression-operators">模板表达式运算符</a></p><p translation-origin="off">the <a href="guide/template-syntax#expression-operators">template expression operators</a></p></li></ul><h3 id="statement-context" translation-result="on">语句上下文<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#statement-context"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="statement-context">Statement context<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#statement-context"><i class="material-icons">link</i></a></h3><p translation-result="on">和表达式中一样，语句只能引用语句上下文中 —— 通常是正在绑定事件的那个<strong>组件实例</strong>。</p><p translation-origin="off">As with expressions, statements can refer only to what's in the statement context such as an event handling method of the component instance.</p><p translation-result="on">典型的<em>语句上下文</em>就是当前组件的实例。 <code>(click)="deleteHero()"</code> 中的 <em>deleteHero</em> 就是这个数据绑定组件上的一个方法。</p><p translation-origin="off">The <em>statement context</em> is typically the component instance. The <em>deleteHero</em> in <code>(click)="deleteHero()"</code> is a method of the data-bound component.</p><code-example path="template-syntax/src/app/app.component.html" region="context-component-statement" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;button (click)="deleteHero()"&gt;Delete hero&lt;/button&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"deleteHero()"</span><span class="tag">&gt;</span><span class="pln">Delete hero</span><span class="tag">&lt;/button&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">语句上下文可以引用模板自身上下文中的属性。 在下面的例子中，就把模板的 <code>$event</code> 对象、<a href="guide/template-syntax#template-input-variable">模板输入变量</a> (<code>let hero</code>)和<a href="guide/template-syntax#ref-vars">模板引用变量</a> (<code>#heroForm</code>)传给了组件中的一个事件处理器方法。</p><p translation-origin="off">The statement context may also refer to properties of the template's own context. In the following examples, the template <code>$event</code> object, a <a href="guide/template-syntax#template-input-variable">template input variable</a> (<code>let hero</code>), and a <a href="guide/template-syntax#ref-vars">template reference variable</a> (<code>#heroForm</code>) are passed to an event handling method of the component.</p><code-example path="template-syntax/src/app/app.component.html" region="context-var-statement" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;button (click)="onSave($event)"&gt;Save&lt;/button&gt; &lt;button *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let hero of heroes" (click)="deleteHero(hero)"&gt;{{hero.name}}&lt;/button&gt; &lt;form #heroForm (ngSubmit)="onSubmit(heroForm)"&gt; ... &lt;/form&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"onSave($event)"</span><span class="tag">&gt;</span><span class="pln">Save</span><span class="tag">&lt;/button&gt;</span><span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let hero of heroes"</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"deleteHero(hero)"</span><span class="tag">&gt;</span><span class="pln">{{hero.name}}</span><span class="tag">&lt;/button&gt;</span><span class="pln">
</span><span class="tag">&lt;form</span><span class="pln"> #</span><span class="atn">heroForm</span><span class="pln"> (</span><span class="atn">ngSubmit</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"onSubmit(heroForm)"</span><span class="tag">&gt;</span><span class="pln"> ... </span><span class="tag">&lt;/form&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">模板上下文中的变量名的优先级高于组件上下文中的变量名。在上面的 <code>deleteHero(hero)</code> 中，<code>hero</code> 是一个模板输入变量，而不是组件中的 <code>hero</code> 属性。</p><p translation-origin="off">Template context names take precedence over component context names. In <code>deleteHero(hero)</code> above, the <code>hero</code> is the template input variable, not the component's <code>hero</code> property.</p><h3 id="statement-guidelines" translation-result="on">语句指南<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#statement-guidelines"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="statement-guidelines">Statement guidelines<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#statement-guidelines"><i class="material-icons">link</i></a></h3><p translation-result="on">模板语句不能引用全局命名空间的任何东西。比如不能引用 <code>window</code> 或 <code><a href="api/platform-server/PlatformConfig#document" class="code-anchor">document</a></code>，也不能调用 <code>console.log</code> 或 <code>Math.max</code>。</p><p translation-origin="off">Template statements cannot refer to anything in the global namespace. They can't refer to <code>window</code> or <code><a href="api/platform-server/PlatformConfig#document" class="code-anchor">document</a></code>. They can't call <code>console.log</code> or <code>Math.max</code>.</p><p translation-result="on">和表达式一样，避免写复杂的模板语句。 常规是函数调用或者属性赋值。</p><p translation-origin="off">As with expressions, avoid writing complex template statements. A method call or simple property assignment should be the norm.</p><hr><a id="binding-syntax"></a><h2 id="binding-syntax-an-overview" translation-result="on">绑定语法：概览<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#binding-syntax-an-overview"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="binding-syntax-an-overview">Binding syntax: an overview<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#binding-syntax-an-overview"><i class="material-icons">link</i></a></h2><p translation-result="on">数据绑定是一种机制，用来协调用户可见的内容，特别是应用数据的值。 虽然也可以手动从 HTML 中推送或拉取这些值，但是如果将这些任务转交给绑定框架，应用就会更易于编写、阅读和维护。 您只需声明数据源和目标 HTML 元素之间的绑定关系就可以了，框架会完成其余的工作。</p><p translation-origin="off">Data-binding is a mechanism for coordinating what users see, specifically with application data values. While you could push values to and pull values from HTML, the application is easier to write, read, and maintain if you turn these tasks over to a binding framework. You simply declare bindings between binding sources, target HTML elements, and let the framework do the rest.</p><p translation-result="on">对本节中语法和代码片段的说明，参见<live-example name="binding-syntax" ng-version="9.0.0-rc.11"><span style="display:none">绑定语法范例</span><span><span class="ng-star-inserted"><a target="_blank" title="绑定语法范例" href="generated/live-examples/binding-syntax/stackblitz.html">绑定语法范例</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/binding-syntax/binding-syntax.zip">下载范例</a></span></span></span></live-example>。</p><p translation-origin="off">For a demonstration of the syntax and code snippets in this section, see the<live-example name="binding-syntax" ng-version="9.0.0-rc.11"><span style="display:none">binding syntax example</span><span><span class="ng-star-inserted"><a target="_blank" title="binding syntax example" href="generated/live-examples/binding-syntax/stackblitz.html">binding syntax example</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/binding-syntax/binding-syntax.zip">下载范例</a></span></span></span></live-example>.</p><p translation-result="on">Angular 提供了多种数据绑定方式。绑定类型可以分为三类，按数据流的方向分为：</p><p translation-origin="off">Angular provides many kinds of data-binding. Binding types can be grouped into three categories distinguished by the direction of data flow:</p><ul><li><p translation-result="on">从<em>数据源到视图</em></p><p translation-origin="off">From the <em>source-to-view</em></p></li><li><p translation-result="on">从<em>视图到数据源</em></p><p translation-origin="off">From <em>view-to-source</em></p></li><li><p translation-result="on">双向：<em>视图到数据源到视图</em></p><p translation-origin="off">Two-way sequence: <em>view-to-source-to-view</em></p></li></ul><style>td,th{vertical-align:top}</style><table width="100%"><colgroup><col width="30%"><col width="50%"><col width="20%"></colgroup><tbody><tr><th><p translation-result="on">绑定类型</p><p translation-origin="off">Type</p></th><th><p translation-result="on">语法</p><p translation-origin="off">Syntax</p></th><th><p translation-result="on">分类</p><p translation-origin="off">Category</p></th></tr><tr><td><p translation-result="on">插值<br>属性<br>Attribute<br>CSS 类<br>样式</p><p translation-origin="off">Interpolation<br>Property<br>Attribute<br>Class<br>Style</p></td><td><code-example ng-version="9.0.0-rc.11"><div style="display:none">{{expression}} [target]="expression" bind-target="expression"</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pun">{{</span><span class="pln">expression</span><span class="pun">}}</span><span class="pln">
</span><span class="pun">[</span><span class="pln">target</span><span class="pun">]=</span><span class="str">"expression"</span><span class="pln">
bind</span><span class="pun">-</span><span class="pln">target</span><span class="pun">=</span><span class="str">"expression"</span></code>
    </pre></aio-code></code-example></td><td><p translation-result="on">单向<br>从数据源<br>到视图</p><p translation-origin="off">One-way<br>from data source<br>to view target</p></td></tr><tr><td><p translation-result="on">事件</p><p translation-origin="off">Event</p></td><td><code-example ng-version="9.0.0-rc.11"><div style="display:none">(target)="statement" on-target="statement"</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pun">(</span><span class="pln">target</span><span class="pun">)=</span><span class="str">"statement"</span><span class="pln">
on</span><span class="pun">-</span><span class="pln">target</span><span class="pun">=</span><span class="str">"statement"</span></code>
    </pre></aio-code></code-example></td><td><p translation-result="on">从视图到数据源的单向绑定</p><p translation-origin="off">One-way<br>from view target<br>to data source</p></td></tr><tr><td><p translation-result="on">双向</p><p translation-origin="off">Two-way</p></td><td><code-example ng-version="9.0.0-rc.11"><div style="display:none">[(target)]="expression" bindon-target="expression"</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pun">[(</span><span class="pln">target</span><span class="pun">)]=</span><span class="str">"expression"</span><span class="pln">
bindon</span><span class="pun">-</span><span class="pln">target</span><span class="pun">=</span><span class="str">"expression"</span></code>
    </pre></aio-code></code-example></td><td><p translation-result="on">双向</p><p translation-origin="off">Two-way</p></td></tr></tbody></table><p translation-result="on">除插值以外的其它绑定类型在等号的左侧都有一个“目标名称”，由绑定符 <code>[]</code> 或 <code>()</code> 包起来， 或者带有前缀：<code>bind-</code>，<code>on-</code>，<code>bindon-</code>。</p><p translation-origin="off">Binding types other than interpolation have a <strong>target name</strong> to the left of the equal sign, either surrounded by punctuation, <code>[]</code> or <code>()</code>, or preceded by a prefix: <code>bind-</code>, <code>on-</code>, <code>bindon-</code>.</p><p translation-result="on">绑定的“目标”是绑定符内部的属性或事件：<code>[]</code>、<code>()</code> 或 <code>[()]</code>。</p><p translation-origin="off">The <em>target</em> of a binding is the property or event inside the binding punctuation: <code>[]</code>, <code>()</code> or <code>[()]</code>.</p><p translation-result="on">在绑定时可以使用<strong>来源</strong>指令的每个公共成员。 您无需进行任何特殊操作即可在模板表达式或语句内访问指令的成员。</p><p translation-origin="off">Every public member of a <strong>source</strong> directive is automatically available for binding. You don't have to do anything special to access a directive member in a template expression or statement.</p><h3 id="data-binding-and-html" translation-result="on">数据绑定与 HTML<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#data-binding-and-html"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="data-binding-and-html">Data-binding and HTML<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#data-binding-and-html"><i class="material-icons">link</i></a></h3><p translation-result="on">在正常的 HTML 开发过程中，你使用 HTML 元素来创建视觉结构， 通过把字符串常量设置到元素的 attribute 来修改那些元素。</p><p translation-origin="off">In the normal course of HTML development, you create a visual structure with HTML elements, and you modify those elements by setting element attributes with string constants.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div class="special"&gt;Plain old <a href="api/core/SecurityContext#HTML" class="code-anchor">HTML</a>&lt;/div&gt; &lt;img src="images/item.png"&gt; &lt;button disabled&gt;Save&lt;/button&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"special"</span><span class="tag">&gt;</span><span class="pln">Plain old </span><a href="api/core/SecurityContext#HTML" class="code-anchor"><span class="pln">HTML</span></a><span class="tag">&lt;/div&gt;</span><span class="pln">

</span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/item.png"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">disabled</span><span class="tag">&gt;</span><span class="pln">Save</span><span class="tag">&lt;/button&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">使用数据绑定，您可以控制按钮状态等各个方面：</p><p translation-origin="off">With data-binding, you can control things like the state of a button:</p><code-example path="binding-syntax/src/app/app.component.html" region="disabled-button" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;!-- Bind button disabled <a href="api/animations/state" class="code-anchor">state</a> to `isUnchanged` property --&gt; &lt;button [disabled]="isUnchanged"&gt;Save&lt;/button&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">&lt;!-- Bind button disabled </span><a href="api/animations/state" class="code-anchor"><span class="com">state</span></a><span class="com"> to `isUnchanged` property --&gt;</span><span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> [</span><span class="atn">disabled</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"isUnchanged"</span><span class="tag">&gt;</span><span class="pln">Save</span><span class="tag">&lt;/button&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">请注意，这里绑定到的是按钮的 DOM 元素的 <code>disabled</code> 这个 <em>Property</em>，而不是 <em>Attribute</em>。 这是数据绑定的通用规则。数据绑定使用 DOM 元素、组件和指令的 <em>Property</em>，而不是 HTML 的<em>Attribute</em>。</p><p translation-origin="off">Notice that the binding is to the <code>disabled</code> property of the button's DOM element, <strong>not</strong> the attribute. This applies to data-binding in general. Data-binding works with <em>properties</em> of DOM elements, components, and directives, not HTML <em>attributes</em>.</p><h3 id="html-attribute-vs-dom-property" translation-result="on">HTML attribute 与 DOM property 的对比<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#html-attribute-vs-dom-property"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="html-attribute-vs-dom-property">HTML attribute vs. DOM property<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#html-attribute-vs-dom-property"><i class="material-icons">link</i></a></h3><p translation-result="on">理解 HTML 属性和 DOM 属性之间的区别，是了解 Angular 绑定如何工作的关键。<strong>Attribute 是由 HTML 定义的。Property 是从 DOM（文档对象模型）节点访问的。</strong></p><p translation-origin="off">The distinction between an HTML attribute and a DOM property is key to understanding how Angular binding works. <strong>Attributes are defined by HTML. Properties are accessed from DOM (Document Object Model) nodes.</strong></p><ul><li><p translation-result="on">一些 HTML Attribute 可以 1:1 映射到 Property；例如，“ id”。</p><p translation-origin="off">A few HTML attributes have 1:1 mapping to properties; for example, <code>id</code>.</p></li><li><p translation-result="on">某些 HTML Attribute 没有相应的 Property。例如，<code>aria-*</code>。</p><p translation-origin="off">Some HTML attributes don't have corresponding properties; for example, <code>aria-*</code>.</p></li><li><p translation-result="on">某些 DOM Property 没有相应的 Attribute。例如，<code>textContent</code>。</p><p translation-origin="off">Some DOM properties don't have corresponding attributes; for example, <code>textContent</code>.</p></li></ul><p translation-result="on">重要的是要记住，<em>HTML Attribute</em> 和 <em>DOM Property</em> 是不同的，就算它们具有相同的名称也是如此。 在 Angular 中，HTML Attribute 的唯一作用是初始化元素和指令的状态。</p><p translation-origin="off">It is important to remember that <em>HTML attribute</em> and the <em>DOM property</em> are different things, even when they have the same name. In Angular, the only role of HTML attributes is to initialize element and directive state.</p><p translation-result="on"><strong>模板绑定使用的是 <em>Property</em> 和<em>事件</em>，而不是 <em>Attribute</em>。</strong></p><p translation-origin="off"><strong>Template binding works with <em>properties</em> and <em>events</em>, not <em>attributes</em>.</strong></p><p translation-result="on">编写数据绑定时，您只是在和目标对象的 <em>DOM Property</em> 和<em>事件</em>打交道。</p><p translation-origin="off">When you write a data-binding, you're dealing exclusively with the <em>DOM properties</em> and <em>events</em> of the target object.</p><div class="alert is-helpful"><p translation-result="on">该通用规则可以帮助您建立 HTML Attribute 和 DOM Property 的思维模型： <strong>属性负责初始化 DOM 属性，然后完工。Property 值可以改变；Attribute 值则不能。</strong></p><p translation-origin="off">This general rule can help you build a mental model of attributes and DOM properties: <strong>Attributes initialize DOM properties and then they are done. Property values can change; attribute values can't.</strong></p><p translation-result="on">此规则有一个例外。 可以通过 <code>setAttribute()</code> 来更改 Attribute，接着它会重新初始化相应的 DOM 属性。</p><p translation-origin="off">There is one exception to this rule. Attributes can be changed by <code>setAttribute()</code>, which re-initializes corresponding DOM properties.</p></div><p translation-result="on">欲知详情，参见 <a href="https://developer.mozilla.org/en-US/docs/Web/API#Interfaces">MDN 接口文档</a>，其中包含所有标准 DOM 元素及其 Property 的 API 文档。 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code> Attribute</a> 与 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement"><code>&lt;td&gt;</code> Property</a> 之间的比较是一个很有用的例子。 特别是，您可以通过 “DOM 接口” 链接从 Attribute 页面导航到 Property 页面，并在继承层次中导航到 <code>HTMLTableCellElement</code>。</p><p translation-origin="off">For more information, see the <a href="https://developer.mozilla.org/en-US/docs/Web/API#Interfaces">MDN Interfaces documentation</a> which has API docs for all the standard DOM elements and their properties. Comparing the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code> attributes</a> attributes to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement"><code>&lt;td&gt;</code> properties</a> provides a helpful example for differentiation. In particular, you can navigate from the attributes page to the properties via "DOM interface" link, and navigate the inheritance hierarchy up to <code>HTMLTableCellElement</code>.</p><h4 id="example-1-an-input" translation-result="on">范例 1：<code>&lt;input&gt;</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#example-1-an-input"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="example-1-an-input">Example 1: an <code>&lt;input&gt;</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#example-1-an-input"><i class="material-icons">link</i></a></h4><p translation-result="on">当浏览器渲染 <code>&lt;input type="text" value="Sarah"&gt;</code> 时，它会创建一个对应的 DOM 节点，其 <code>value</code> Property 已初始化为 “Sarah”。</p><p translation-origin="off">When the browser renders <code>&lt;input type="text" value="Sarah"&gt;</code>, it creates a corresponding DOM node with a <code>value</code> property initialized to "Sarah".</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;input type="text" value="Sarah"&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Sarah"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">当用户在 <code>&lt;input&gt;</code> 中输入 <code>Sally</code> 时，DOM 元素的 <code>value</code> <em>Property</em> 将变为 <code>Sally</code>。 但是，如果使用 <code>input.getAttribute('value')</code> 查看 HTML 的 Attribute <code>value</code>，则可以看到该 <em>attribute</em> 保持不变 —— 它返回了 <code>Sarah</code>。</p><p translation-origin="off">When the user enters "Sally" into the <code>&lt;input&gt;</code>, the DOM element <code>value</code> <em>property</em> becomes "Sally". However, if you look at the HTML attribute <code>value</code> using <code>input.getAttribute('value')</code>, you can see that the <em>attribute</em> remains unchanged—it returns "Sarah".</p><p translation-result="on">HTML 的 <code>value</code> 这个 attribute 指定了<em>初始</em>值；DOM 的 <code>value</code> 这个 property 是<em>当前</em>值。</p><p translation-origin="off">The HTML attribute <code>value</code> specifies the <em>initial</em> value; the DOM <code>value</code> property is the <em>current</em> value.</p><p translation-result="on">要通过可运行的应用查看 Attribute 和 DOM Property 的差别，请参阅<live-example name="binding-syntax" ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="现场演练" href="generated/live-examples/binding-syntax/stackblitz.html">现场演练</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/binding-syntax/binding-syntax.zip">下载范例</a></span></span></span></live-example>，特别注意其绑定语法。</p><p translation-origin="off">To see attributes versus DOM properties in a functioning app, see the<live-example name="binding-syntax" ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="现场演练" href="generated/live-examples/binding-syntax/stackblitz.html">现场演练</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/binding-syntax/binding-syntax.zip">下载范例</a></span></span></span></live-example>especially for binding syntax.</p><h4 id="example-2-a-disabled-button" translation-result="on">范例 2：禁用按钮<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#example-2-a-disabled-button"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="example-2-a-disabled-button">Example 2: a disabled button<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#example-2-a-disabled-button"><i class="material-icons">link</i></a></h4><p translation-result="on"><code>disabled</code> Attribute 是另一个例子。按钮的 <code>disabled</code> <em>Property</em> 默认为 <code>false</code>，因此按钮是启用的。</p><p translation-origin="off">The <code>disabled</code> attribute is another example. A button's <code>disabled</code> <em>property</em> is <code>false</code> by default so the button is enabled.</p><p translation-result="on">当你添加 <code>disabled</code> <em>Attribute</em> 时，仅仅它的出现就将按钮的 <code>disabled</code> <em>Property</em> 初始化成了 <code>true</code>，因此该按钮就被禁用了。</p><p translation-origin="off">When you add the <code>disabled</code> <em>attribute</em>, its presence alone initializes the button's <code>disabled</code> <em>property</em> to <code>true</code> so the button is disabled.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;button disabled&gt;Test Button&lt;/button&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">disabled</span><span class="tag">&gt;</span><span class="pln">Test Button</span><span class="tag">&lt;/button&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">添加和删​​除 <code>disabled</code> <em>Attribute</em> 会禁用和启用该按钮。 但是，<em>Attribute</em> 的值无关紧要，这就是为什么您不能通过编写 <code>&lt;button disabled="false"&gt;仍被禁用&lt;/button&gt;</code> 来启用此按钮的原因。</p><p translation-origin="off">Adding and removing the <code>disabled</code> <em>attribute</em> disables and enables the button. However, the value of the <em>attribute</em> is irrelevant, which is why you cannot enable a button by writing <code>&lt;button disabled="false"&gt;Still Disabled&lt;/button&gt;</code>.</p><p translation-result="on">要控制按钮的状态，请设置 <code>disabled</code> <em>Property</em>，</p><p translation-origin="off">To control the state of the button, set the <code>disabled</code> <em>property</em>,</p><div class="alert is-helpful"><p translation-result="on">虽然技术上说你可以设置 <code>[attr.disabled]</code> 属性绑定，但是它们的值是不同的，Property 绑定要求一个布尔值，而其相应的 Attribute 绑定则取决于该值是否为 <code>null</code> 。例子如下：</p><p translation-origin="off">Though you could technically set the <code>[attr.disabled]</code> attribute binding, the values are different in that the property binding requires to a boolean value, while its corresponding attribute binding relies on whether the value is <code>null</code> or not. Consider the following:</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;input [disabled]="condition ? true : false"&gt; &lt;input [attr.disabled]="condition ? 'disabled' : null"&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;input</span><span class="pln"> [</span><span class="atn">disabled</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"condition ? true : false"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;input</span><span class="pln"> [</span><span class="atn">attr</span><span class="pln">.</span><span class="atn">disabled</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"condition ? 'disabled' : null"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">通常，要使用 Property 绑定而不是 Attribute 绑定，因为它更直观（是一个布尔值），语法更短，并且性能更高。</p><p translation-origin="off">Generally, use property binding over attribute binding as it is more intuitive (being a boolean value), has a shorter syntax, and is more performant.</p></div><p translation-result="on">要通过可运行的应用查看 <code>disabled</code> 按钮示例，请参见<live-example name="binding-syntax" ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="现场演练" href="generated/live-examples/binding-syntax/stackblitz.html">现场演练</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/binding-syntax/binding-syntax.zip">下载范例</a></span></span></span></live-example>，特别注意其绑定语法。本示例展示了如何从组件中切换禁用属性。</p><p translation-origin="off">To see the <code>disabled</code> button example in a functioning app, see the<live-example name="binding-syntax" ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="现场演练" href="generated/live-examples/binding-syntax/stackblitz.html">现场演练</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/binding-syntax/binding-syntax.zip">下载范例</a></span></span></span></live-example>especially for binding syntax. This example shows you how to toggle the disabled property from the component.</p><h2 id="binding-types-and-targets" translation-result="on">绑定类型与绑定目标<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#binding-types-and-targets"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="binding-types-and-targets">Binding types and targets<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#binding-types-and-targets"><i class="material-icons">link</i></a></h2><p translation-result="on">数据绑定的目标是 DOM 中的对象。 根据绑定类型，该目标可以是 Property 名（元素、组件或指令的）、事件名（元素、组件或指令的），有时是 Attribute 名。下表中总结了不同绑定类型的目标。</p><p translation-origin="off">The <strong>target of a data-binding</strong> is something in the DOM. Depending on the binding type, the target can be a property (element, component, or directive), an event (element, component, or directive), or sometimes an attribute name. The following table summarizes the targets for the different binding types.</p><style>td,th{vertical-align:top}</style><table width="100%"><colgroup><col width="10%"><col width="15%"><col width="75%"></colgroup><tbody><tr><th><p translation-result="on">绑定类型</p><p translation-origin="off">Type</p></th><th><p translation-result="on">目标</p><p translation-origin="off">Target</p></th><th><p translation-result="on">范例</p><p translation-origin="off">Examples</p></th></tr><tr><td><p translation-result="on">属性</p><p translation-origin="off">Property</p></td><td><p translation-result="on">元素的 property<br>组件的 property<br>指令的 property</p><p translation-origin="off">Element&nbsp;property<br>Component&nbsp;property<br>Directive&nbsp;property</p></td><td><p translation-result="on"> <code>src</code>, <code>hero</code>, 和 <code><a href="api/common/NgClass" class="code-anchor">ngClass</a></code> 如下所示:</p><p translation-origin="off"> <code>src</code>, <code>hero</code>, and <code><a href="api/common/NgClass" class="code-anchor">ngClass</a></code> in the following:</p><p><code-example path="template-syntax/src/app/app.component.html" region="property-binding-syntax-1" ng-version="9.0.0-rc.11"><div style="display:none">&lt;img [src]="heroImageUrl"&gt; &lt;app-hero-detail [hero]="currentHero"&gt;&lt;/app-hero-detail&gt; &lt;div [<a href="api/common/NgClass" class="code-anchor">ngClass</a>]="{'special': isSpecial}"&gt;&lt;/div&gt;</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;img</span><span class="pln"> [</span><span class="atn">src</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"heroImageUrl"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;app-hero-detail</span><span class="pln"> [</span><span class="atn">hero</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"currentHero"</span><span class="tag">&gt;&lt;/app-hero-detail&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> [</span><a href="api/common/NgClass" class="code-anchor"><span class="atn">ngClass</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"{'special': isSpecial}"</span><span class="tag">&gt;&lt;/div&gt;</span></code>
    </pre></aio-code></code-example></p></td></tr><tr><td><p translation-result="on">事件</p><p translation-origin="off">Event</p></td><td><p translation-result="on">元素的事件<br>组件的事件<br>指令的事件</p><p translation-origin="off">Element&nbsp;event<br>Component&nbsp;event<br>Directive&nbsp;event</p></td><td><p translation-result="on"> <code>click</code>, <code>deleteRequest</code>, 和 <code>myClick</code> 如下所示：</p><p translation-origin="off"> <code>click</code>, <code>deleteRequest</code>, and <code>myClick</code> in the following:</p><p><code-example path="template-syntax/src/app/app.component.html" region="event-binding-syntax-1" ng-version="9.0.0-rc.11"><div style="display:none">&lt;button (click)="onSave()"&gt;Save&lt;/button&gt; &lt;app-hero-detail (deleteRequest)="deleteHero()"&gt;&lt;/app-hero-detail&gt; &lt;div (myClick)="clicked=$event" clickable&gt;click me&lt;/div&gt;</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"onSave()"</span><span class="tag">&gt;</span><span class="pln">Save</span><span class="tag">&lt;/button&gt;</span><span class="pln">
</span><span class="tag">&lt;app-hero-detail</span><span class="pln"> (</span><span class="atn">deleteRequest</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"deleteHero()"</span><span class="tag">&gt;&lt;/app-hero-detail&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> (</span><span class="atn">myClick</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"clicked=$event"</span><span class="pln"> </span><span class="atn">clickable</span><span class="tag">&gt;</span><span class="pln">click me</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example></p></td></tr><tr><td><p translation-result="on">双向</p><p translation-origin="off">Two-way</p></td><td><p translation-result="on">事件与 property</p><p translation-origin="off">Event and property</p></td><td><p><code-example path="template-syntax/src/app/app.component.html" region="2-way-binding-syntax-1" ng-version="9.0.0-rc.11"><div style="display:none">&lt;input [(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]="name"&gt;</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;input</span><span class="pln"> [(</span><a href="api/forms/NgModel" class="code-anchor"><span class="atn">ngModel</span></a><span class="pln">)]</span><span class="pun">=</span><span class="atv">"name"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example></p></td></tr><tr><td><p>Attribute</p></td><td><p translation-result="on">attribute（例外情况）</p><p translation-origin="off">Attribute (the&nbsp;exception)</p></td><td><p><code-example path="template-syntax/src/app/app.component.html" region="attribute-binding-syntax-1" ng-version="9.0.0-rc.11"><div style="display:none">&lt;button [attr.aria-label]="help"&gt;help&lt;/button&gt;</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;button</span><span class="pln"> [</span><span class="atn">attr</span><span class="pln">.</span><span class="atn">aria-label</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"help"</span><span class="tag">&gt;</span><span class="pln">help</span><span class="tag">&lt;/button&gt;</span></code>
    </pre></aio-code></code-example></p></td></tr><tr><td><p translation-result="on">CSS 类</p><p translation-origin="off">Class</p></td><td><p> <code>class</code> property</p></td><td><p><code-example path="template-syntax/src/app/app.component.html" region="class-binding-syntax-1" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div [class.special]="isSpecial"&gt;Special&lt;/div&gt;</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> [</span><span class="atn">class</span><span class="pln">.</span><span class="atn">special</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"isSpecial"</span><span class="tag">&gt;</span><span class="pln">Special</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example></p></td></tr><tr><td><p translation-result="on">样式</p><p translation-origin="off">Style</p></td><td><p> <code><a href="api/animations/style" class="code-anchor">style</a></code> property</p></td><td><p><code-example path="template-syntax/src/app/app.component.html" region="style-binding-syntax-1" ng-version="9.0.0-rc.11"><div style="display:none">&lt;button [style.color]="isSpecial ? 'red' : 'green'"&gt;</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;button</span><span class="pln"> [</span><span class="atn">style</span><span class="pln">.</span><span class="atn">color</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"isSpecial ? 'red' : 'green'"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example></p></td></tr></tbody></table><hr><a id="property-binding"></a><h2 id="property-binding-property" translation-result="on">Property 绑定 <code>[property]</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#property-binding-property"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="property-binding-property">Property binding <code>[property]</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#property-binding-property"><i class="material-icons">link</i></a></h2><p translation-result="on">使用 Property 绑定到目标元素或指令 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 装饰器的 set 型属性。 演示本节中所有要点的例子，请参见<live-example name="property-binding" ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="现场演练" href="generated/live-examples/property-binding/stackblitz.html">现场演练</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/property-binding/property-binding.zip">下载范例</a></span></span></span></live-example>。</p><p translation-origin="off">Use property binding to <em>set</em> properties of target elements or directive <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> decorators. For an example demonstrating all of the points in this section, see the<live-example name="property-binding" ng-version="9.0.0-rc.11"><span style="display:none">property binding example</span><span><span class="ng-star-inserted"><a target="_blank" title="property binding example" href="generated/live-examples/property-binding/stackblitz.html">property binding example</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/property-binding/property-binding.zip">下载范例</a></span></span></span></live-example>.</p><h3 id="one-way-in" translation-result="on">单向<em>输入</em><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#one-way-in"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="one-way-in">One-way in<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#one-way-in"><i class="material-icons">link</i></a></h3><p translation-result="on">Property 绑定的值在一个方向上流动，从组件的 Property 变为目标元素的 Property。</p><p translation-origin="off">Property binding flows a value in one direction, from a component's property into a target element property.</p><p translation-result="on">您不能使用属性绑定从目标元素读取或拉取值。同样的，您也不能使用属性绑定在目标元素上调用方法。如果元素要引发事件，则可以使用<a href="guide/template-syntax#event-binding">事件绑定</a>来监听它们。</p><p translation-origin="off">You can't use property binding to read or pull values out of target elements. Similarly, you cannot use property binding to call a method on the target element. If the element raises events, you can listen to them with an <a href="guide/template-syntax#event-binding">event binding</a>.</p><p translation-result="on">如果您要读取目标元素的属性或调用其方法，请参阅 <a href="api/core/ViewChild">ViewChild</a> 和 <a href="api/core/ContentChild">ContentChild</a> 的 API 参考。</p><p translation-origin="off">If you must read a target element property or call one of its methods, see the API reference for <a href="api/core/ViewChild">ViewChild</a> and <a href="api/core/ContentChild">ContentChild</a>.</p><h3 id="examples" translation-result="on">例子<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#examples"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="examples">Examples<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#examples"><i class="material-icons">link</i></a></h3><p translation-result="on">最常见的 Property 绑定将元素的 Property 设置为组件的 Property 值。例子之一是将 <code>img</code> 元素的 <code>src</code> Property 绑定到组件的 <code>itemImageUrl</code> Property：</p><p translation-origin="off">The most common property binding sets an element property to a component property value. An example is binding the <code>src</code> property of an image element to a component's <code>itemImageUrl</code> property:</p><code-example path="property-binding/src/app/app.component.html" region="property-binding" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;img [src]="itemImageUrl"&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;img</span><span class="pln"> [</span><span class="atn">src</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"itemImageUrl"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">这是绑定到 <code>colSpan</code> Property 的示例。请注意，它不是 <code>colspan</code>，后者是 Attribute，用小写的 s 拼写。</p><p translation-origin="off">Here's an example of binding to the <code>colSpan</code> property. Notice that it's not <code>colspan</code>, which is the attribute, spelled with a lowercase <code>s</code>.</p><code-example path="property-binding/src/app/app.component.html" region="colSpan" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;!-- Notice the colSpan property is camel case --&gt; &lt;tr&gt;&lt;td [colSpan]="2"&gt;Span 2 columns&lt;/td&gt;&lt;/tr&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">&lt;!-- Notice the colSpan property is camel case --&gt;</span><span class="pln">
</span><span class="tag">&lt;tr&gt;&lt;td</span><span class="pln"> [</span><span class="atn">colSpan</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"2"</span><span class="tag">&gt;</span><span class="pln">Span 2 columns</span><span class="tag">&lt;/td&gt;&lt;/tr&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">欲知详情，参见 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement">MDN HTMLTableCellElement</a> 文档。</p><p translation-origin="off">For more details, see the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement">MDN HTMLTableCellElement</a> documentation.</p><p translation-result="on">另一个例子是当组件说它 <code>isUnchanged</code>（未改变）时禁用按钮：</p><p translation-origin="off">Another example is disabling a button when the component says that it <code>isUnchanged</code>:</p><code-example path="property-binding/src/app/app.component.html" region="disabled-button" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;!-- Bind button disabled <a href="api/animations/state" class="code-anchor">state</a> to `isUnchanged` property --&gt; &lt;button [disabled]="isUnchanged"&gt;Disabled Button&lt;/button&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">&lt;!-- Bind button disabled </span><a href="api/animations/state" class="code-anchor"><span class="com">state</span></a><span class="com"> to `isUnchanged` property --&gt;</span><span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> [</span><span class="atn">disabled</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"isUnchanged"</span><span class="tag">&gt;</span><span class="pln">Disabled Button</span><span class="tag">&lt;/button&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">另一个例子是设置指令的属性：</p><p translation-origin="off">Another is setting a property of a directive:</p><code-example path="property-binding/src/app/app.component.html" region="class-binding" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;p [<a href="api/common/NgClass" class="code-anchor">ngClass</a>]="classes"&gt;[<a href="api/common/NgClass" class="code-anchor">ngClass</a>] binding to the classes property making this blue&lt;/p&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;p</span><span class="pln"> [</span><a href="api/common/NgClass" class="code-anchor"><span class="atn">ngClass</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"classes"</span><span class="tag">&gt;</span><span class="pln">[</span><a href="api/common/NgClass" class="code-anchor"><span class="pln">ngClass</span></a><span class="pln">] binding to the classes property making this blue</span><span class="tag">&lt;/p&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">另一种方法是设置自定义组件的模型属性 —— 这是一种父级和子级组件进行通信的好办法：</p><p translation-origin="off">Yet another is setting the model property of a custom component—a great way for parent and child components to communicate:</p><code-example path="property-binding/src/app/app.component.html" region="model-property-binding" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;app-item-detail [childItem]="parentItem"&gt;&lt;/app-item-detail&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;app-item-detail</span><span class="pln"> [</span><span class="atn">childItem</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"parentItem"</span><span class="tag">&gt;&lt;/app-item-detail&gt;</span></code>
    </pre></aio-code></code-example><h3 id="binding-targets" translation-result="on">绑定目标<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#binding-targets"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="binding-targets">Binding targets<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#binding-targets"><i class="material-icons">link</i></a></h3><p translation-result="on">包裹在方括号中的元素属性名标记着目标属性。下列代码中的目标属性是 image 元素的 <code>src</code> 属性。</p><p translation-origin="off">An element property between enclosing square brackets identifies the target property. The target property in the following code is the image element's <code>src</code> property.</p><code-example path="property-binding/src/app/app.component.html" region="property-binding" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;img [src]="itemImageUrl"&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;img</span><span class="pln"> [</span><span class="atn">src</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"itemImageUrl"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">还有一种使用 <code>bind-</code> 前缀的替代方案：</p><p translation-origin="off">There's also the <code>bind-</code> prefix alternative:</p><code-example path="property-binding/src/app/app.component.html" region="bind-prefix" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;img bind-src="itemImageUrl"&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">bind-src</span><span class="pun">=</span><span class="atv">"itemImageUrl"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">在大多数情况下，目标名都是 Property 名，虽然它看起来像 Attribute 名。 因此，在这个例子中，<code>src</code> 是 <code>&lt;img&gt;</code> 元素属性的名称。</p><p translation-origin="off">In most cases, the target name is the name of a property, even when it appears to be the name of an attribute. So in this case, <code>src</code> is the name of the <code>&lt;img&gt;</code> element property.</p><p translation-result="on">元素属性可能是最常见的绑定目标，但 Angular 会先去看这个名字是否是某个已知指令的属性名，就像下面的例子中一样：</p><p translation-origin="off">Element properties may be the more common targets, but Angular looks first to see if the name is a property of a known directive, as it is in the following example:</p><code-example path="property-binding/src/app/app.component.html" region="class-binding" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;p [<a href="api/common/NgClass" class="code-anchor">ngClass</a>]="classes"&gt;[<a href="api/common/NgClass" class="code-anchor">ngClass</a>] binding to the classes property making this blue&lt;/p&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;p</span><span class="pln"> [</span><a href="api/common/NgClass" class="code-anchor"><span class="atn">ngClass</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"classes"</span><span class="tag">&gt;</span><span class="pln">[</span><a href="api/common/NgClass" class="code-anchor"><span class="pln">ngClass</span></a><span class="pln">] binding to the classes property making this blue</span><span class="tag">&lt;/p&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">从技术上讲，Angular 将这个名称与指令的 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 进行匹配，它来自指令的 <code>inputs</code> 数组中列出的 Property 名称之一或是用 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 装饰的属性。这些输入都映射到指令自身的属性。</p><p translation-origin="off">Technically, Angular is matching the name to a directive <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code>, one of the property names listed in the directive's <code>inputs</code> array or a property decorated with <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code>. Such inputs map to the directive's own properties.</p><p translation-result="on">如果名字没有匹配上已知指令或元素的属性，Angular 就会报告“未知指令”的错误。</p><p translation-origin="off">If the name fails to match a property of a known directive or element, Angular reports an “unknown directive” error.</p><div class="alert is-helpful"><p translation-result="on">尽管目标名称通常是 Property 的名称，但是在 Angular 中，有几个常见属性会自动将 Attribute 映射为 Property。这些包括 <code>class</code> / <code>className</code> ， <code>innerHtml</code> / <code>innerHTML</code> 和 <code>tabindex</code> / <code>tabIndex</code> 。</p><p translation-origin="off">Though the target name is usually the name of a property, there is an automatic attribute-to-property mapping in Angular for several common attributes. These include <code>class</code>/<code>className</code>, <code>innerHtml</code>/<code>innerHTML</code>, and <code>tabindex</code>/<code>tabIndex</code>.</p></div><h3 id="avoid-side-effects" translation-result="on">消除副作用<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#avoid-side-effects"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="avoid-side-effects">Avoid side effects<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#avoid-side-effects"><i class="material-icons">link</i></a></h3><p translation-result="on">模板表达的计算应该没有明显的副作用。表达式语言本身或您编写模板表达式的方式在一定程度上有所帮助。您不能为属性绑定表达式中的任何内容赋值，也不能使用递增和递减运算符。</p><p translation-origin="off">Evaluation of a template expression should have no visible side effects. The expression language itself, or the way you write template expressions, helps to a certain extent; you can't assign a value to anything in a property binding expression nor use the increment and decrement operators.</p><p translation-result="on">例如，假设您有一个表达式，该表达式调用了具有副作用的属性或方法。该表达式可以调用类似 <code>getFoo()</code> 的函数，只有您知道 <code>getFoo()</code> 做了什么。如果 <code>getFoo()</code> 更改了某些内容，而您恰巧绑定到该内容，则 Angular 可能会也可能不会显示更改后的值。 Angular 可能会检测到更改并抛出警告错误。最佳实践是坚持使用属性和返回值并避免副作用的方法。</p><p translation-origin="off">For example, you could have an expression that invoked a property or method that had side effects. The expression could call something like <code>getFoo()</code> where only you know what <code>getFoo()</code> does. If <code>getFoo()</code> changes something and you happen to be binding to that something, Angular may or may not display the changed value. Angular may detect the change and throw a warning error. As a best practice, stick to properties and to methods that return values and avoid side effects.</p><h3 id="return-the-proper-type" translation-result="on">返回正确的类型<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#return-the-proper-type"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="return-the-proper-type">Return the proper type<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#return-the-proper-type"><i class="material-icons">link</i></a></h3><p translation-result="on">模板表达式的计算结果应该是目标属性所需要的值类型。如果 <code><a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a></code> 属性需要一个字符串，则返回一个字符串；如果需要一个数字，则返回一个数字；如果需要一个对象，则返回一个对象，依此类推。</p><p translation-origin="off">The template expression should evaluate to the type of value that the target property expects. Return a string if the target property expects a string, a number if it expects a number, an object if it expects an object, and so on.</p><p translation-result="on">在下面的例子中， <code>ItemDetailComponent</code> 的 <code>childItem</code> 属性需要一个字符串，而这正是你要发送给属性绑定的内容：</p><p translation-origin="off">In the following example, the <code>childItem</code> property of the <code>ItemDetailComponent</code> expects a string, which is exactly what you're sending in the property binding:</p><code-example path="property-binding/src/app/app.component.html" region="model-property-binding" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;app-item-detail [childItem]="parentItem"&gt;&lt;/app-item-detail&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;app-item-detail</span><span class="pln"> [</span><span class="atn">childItem</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"parentItem"</span><span class="tag">&gt;&lt;/app-item-detail&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">您可以查看 <code>ItemDetailComponent</code> 来确认这一点，它的 <code>@<a href="api/core/Input" class="code-anchor">Input</a></code> 类型设为了字符串：</p><p translation-origin="off">You can confirm this by looking in the <code>ItemDetailComponent</code> where the <code>@<a href="api/core/Input" class="code-anchor">Input</a></code> type is set to a string:</p><code-example path="property-binding/src/app/item-detail/item-detail.component.ts" region="input-type" header="src/app/item-detail/item-detail.component.ts (setting the @Input() type)" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/Input" class="code-anchor">Input</a>() childItem: string;</div><header class="ng-star-inserted">src/app/item-detail/item-detail.component.ts (setting the @Input() type)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/item-detail/item-detail.component.ts (setting the @Input() type)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/Input" class="code-anchor"><span class="lit">Input</span></a><span class="pun">()</span><span class="pln"> childItem</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span></code>
    </pre></aio-code></code-example><p translation-result="on">如您所见， <code>AppComponent</code> 中的 <code>parentItem</code> 是一个字符串，而 <code>ItemDetailComponent</code> 需要的就是字符串：</p><p translation-origin="off">As you can see here, the <code>parentItem</code> in <code>AppComponent</code> is a string, which the <code>ItemDetailComponent</code> expects:</p><code-example path="property-binding/src/app/app.component.ts" region="parent-data-type" header="src/app/app.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">parentItem = 'lamp';</div><header class="ng-star-inserted">src/app/app.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">parentItem </span><span class="pun">=</span><span class="pln"> </span><span class="str">'lamp'</span><span class="pun">;</span></code>
    </pre></aio-code></code-example><h4 id="passing-in-an-object" translation-result="on">传入对象<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#passing-in-an-object"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="passing-in-an-object">Passing in an object<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#passing-in-an-object"><i class="material-icons">link</i></a></h4><p translation-result="on">前面的简单示例演示了传入字符串的情况。要传递对象，其语法和思想是相同的。</p><p translation-origin="off">The previous simple example showed passing in a string. To pass in an object, the syntax and thinking are the same.</p><p translation-result="on">在这种情况下， <code>ListItemComponent</code> 嵌套在 <code>AppComponent</code> 中，并且 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 属性需要一个对象。</p><p translation-origin="off">In this scenario, <code>ListItemComponent</code> is nested within <code>AppComponent</code> and the <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> property expects an object.</p><code-example path="property-binding/src/app/app.component.html" region="pass-object" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;app-list-item [items]="currentItem"&gt;&lt;/app-list-item&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;app-list-item</span><span class="pln"> [</span><span class="atn">items</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"currentItem"</span><span class="tag">&gt;&lt;/app-list-item&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on"><code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 属性是在 <code>ListItemComponent</code> 中用 <code>Item</code> 类型声明的，并带有 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 装饰器：</p><p translation-origin="off">The <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> property is declared in the <code>ListItemComponent</code> with a type of <code>Item</code> and decorated with <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code>:</p><code-example path="property-binding/src/app/list-item/list-item.component.ts" region="item-input" header="src/app/list-item.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/Input" class="code-anchor">Input</a>() items: Item[];</div><header class="ng-star-inserted">src/app/list-item.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/list-item.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/Input" class="code-anchor"><span class="lit">Input</span></a><span class="pun">()</span><span class="pln"> items</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Item</span><span class="pun">[];</span></code>
    </pre></aio-code></code-example><p translation-result="on">在此示例应用程序中， <code>Item</code> 是具有两个属性的对象。一个 <code>id</code> 和一个 <code>name</code> 。</p><p translation-origin="off">In this sample app, an <code>Item</code> is an object that has two properties; an <code>id</code> and a <code>name</code>.</p><code-example path="property-binding/src/app/item.ts" region="item-class" header="src/app/item.ts" ng-version="9.0.0-rc.11"><div style="display:none">export interface Item { id: number; name: string; }</div><header class="ng-star-inserted">src/app/item.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/item.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">interface</span><span class="pln"> </span><span class="typ">Item</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  id</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
  name</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">当另一个文件 <code>mock-items.ts</code> 中存在一个条目列表时，您可以在 <code>app.component.ts</code> 中指定另一个条目，以便渲染新条目：</p><p translation-origin="off">While a list of items exists in another file, <code>mock-items.ts</code>, you can specify a different item in <code>app.component.ts</code> so that the new item will render:</p><code-example path="property-binding/src/app/app.component.ts" region="pass-object" header="src/app.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">currentItem = [{ id: 21, name: 'phone' }];</div><header class="ng-star-inserted">src/app.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">currentItem </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">
  id</span><span class="pun">:</span><span class="pln"> </span><span class="lit">21</span><span class="pun">,</span><span class="pln">
  name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'phone'</span><span class="pln">
</span><span class="pun">}];</span></code>
    </pre></aio-code></code-example><p translation-result="on">在这个例子中，你只需要确保你所提供的对象的类型，也就是这个 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 的类型是嵌套组件 <code>ListItemComponent</code> 所需要的类型。</p><p translation-origin="off">You just have to make sure, in this case, that you're supplying an object because that's the type of <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> and is what the nested component, <code>ListItemComponent</code>, expects.</p><p translation-result="on">在此示例中， <code>AppComponent</code> 指定了另一个 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 对象（ <code>currentItem</code> ）并将其传给嵌套的 <code>ListItemComponent</code> 。 <code>ListItemComponent</code> 之所以能够使用 <code>currentItem</code> 是因为它与 <code>item.ts</code> 中定义的 <code>Item</code> 对象的类型相匹配。在 <code>item.ts</code> 文件中， <code>ListItemComponent</code> 获得了其对 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 的定义。</p><p translation-origin="off">In this example, <code>AppComponent</code> specifies a different <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> object (<code>currentItem</code>) and passes it to the nested <code>ListItemComponent</code>. <code>ListItemComponent</code> was able to use <code>currentItem</code> because it matches what an <code>Item</code> object is according to <code>item.ts</code>. The <code>item.ts</code> file is where <code>ListItemComponent</code> gets its definition of an <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code>.</p><h3 id="remember-the-brackets" translation-result="on">别忘了方括号<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#remember-the-brackets"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="remember-the-brackets">Remember the brackets<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#remember-the-brackets"><i class="material-icons">link</i></a></h3><p translation-result="on">方括号 <code>[]</code> 告诉 Angular 计算该模板表达式。如果省略括号，Angular 会将字符串视为常量，并使用该字符串<em>初始化目标属性</em> ：</p><p translation-origin="off">The brackets, <code>[]</code>, tell Angular to evaluate the template expression. If you omit the brackets, Angular treats the string as a constant and <em>initializes the target property</em> with that string:</p><code-example path="property-binding/src/app/app.component.html" region="no-evaluation" header="src/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;app-item-detail childItem="parentItem"&gt;&lt;/app-item-detail&gt;</div><header class="ng-star-inserted">src/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;app-item-detail</span><span class="pln"> </span><span class="atn">childItem</span><span class="pun">=</span><span class="atv">"parentItem"</span><span class="tag">&gt;&lt;/app-item-detail&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">省略方括号将渲染字符串 <code>parentItem</code> ，而不是 <code>parentItem</code> 的值。</p><p translation-origin="off">Omitting the brackets will render the string <code>parentItem</code>, not the value of <code>parentItem</code>.</p><h3 id="one-time-string-initialization" translation-result="on">一次性字符串初始化<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#one-time-string-initialization"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="one-time-string-initialization">One-time string initialization<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#one-time-string-initialization"><i class="material-icons">link</i></a></h3><p translation-result="on">当满足下列条件时，<em>应该</em>省略括号：</p><p translation-origin="off">You <em>should</em> omit the brackets when all of the following are true:</p><ul><li><p translation-result="on">目标属性接受字符串值。</p><p translation-origin="off">The target property accepts a string value.</p></li><li><p translation-result="on">字符串是一个固定值，您可以直接将其放入模板中。</p><p translation-origin="off">The string is a fixed value that you can put directly into the template.</p></li><li><p translation-result="on">这个初始值永不改变。</p><p translation-origin="off">This initial value never changes.</p></li></ul><p translation-result="on">您通常会以这种方式在标准 HTML 中初始化属性，并且它对指令和组件的属性初始化同样有效。 下面的示例将 <code>StringInitComponent</code> 中的 <code>prefix</code> 属性初始化为固定字符串，而不是模板表达式。 Angular 设置它，然后就不管它了。</p><p translation-origin="off">You routinely initialize attributes this way in standard HTML, and it works just as well for directive and component property initialization. The following example initializes the <code>prefix</code> property of the <code>StringInitComponent</code> to a fixed string, not a template expression. Angular sets it and forgets about it.</p><code-example path="property-binding/src/app/app.component.html" region="string-init" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;app-string-init prefix="This is a one-time initialized string."&gt;&lt;/app-string-init&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;app-string-init</span><span class="pln"> </span><span class="atn">prefix</span><span class="pun">=</span><span class="atv">"This is a one-time initialized string."</span><span class="tag">&gt;&lt;/app-string-init&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">另一方面，<code>[<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>]</code> 绑定仍然是与组件的 <code>currentItem</code> 属性的实时绑定。</p><p translation-origin="off">The <code>[<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>]</code> binding, on the other hand, remains a live binding to the component's <code>currentItem</code> property.</p><h3 id="property-binding-vs-interpolation" translation-result="on">属性绑定与插值<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#property-binding-vs-interpolation"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="property-binding-vs-interpolation">Property binding vs. interpolation<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#property-binding-vs-interpolation"><i class="material-icons">link</i></a></h3><p translation-result="on">你通常得在插值和属性绑定之间做出选择。 下列这几对绑定做的事情完全相同：</p><p translation-origin="off">You often have a choice between interpolation and property binding. The following binding pairs do the same thing:</p><code-example path="property-binding/src/app/app.component.html" region="property-binding-interpolation" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;p&gt;&lt;img src="{{itemImageUrl}}"&gt; is the &lt;i&gt;interpolated&lt;/i&gt; image.&lt;/p&gt; &lt;p&gt;&lt;img [src]="itemImageUrl"&gt; is the &lt;i&gt;property bound&lt;/i&gt; image.&lt;/p&gt; &lt;p&gt;&lt;span&gt;"{{interpolationTitle}}" is the &lt;i&gt;interpolated&lt;/i&gt; title.&lt;/span&gt;&lt;/p&gt; &lt;p&gt;"&lt;span [innerHTML]="propertyTitle"&gt;&lt;/span&gt;" is the &lt;i&gt;property bound&lt;/i&gt; title.&lt;/p&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;p&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"{{itemImageUrl}}"</span><span class="tag">&gt;</span><span class="pln"> is the </span><span class="tag">&lt;i&gt;</span><span class="pln">interpolated</span><span class="tag">&lt;/i&gt;</span><span class="pln"> image.</span><span class="tag">&lt;/p&gt;</span><span class="pln">
</span><span class="tag">&lt;p&gt;&lt;img</span><span class="pln"> [</span><span class="atn">src</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"itemImageUrl"</span><span class="tag">&gt;</span><span class="pln"> is the </span><span class="tag">&lt;i&gt;</span><span class="pln">property bound</span><span class="tag">&lt;/i&gt;</span><span class="pln"> image.</span><span class="tag">&lt;/p&gt;</span><span class="pln">

</span><span class="tag">&lt;p&gt;&lt;span&gt;</span><span class="pln">"{{interpolationTitle}}" is the </span><span class="tag">&lt;i&gt;</span><span class="pln">interpolated</span><span class="tag">&lt;/i&gt;</span><span class="pln"> title.</span><span class="tag">&lt;/span&gt;&lt;/p&gt;</span><span class="pln">
</span><span class="tag">&lt;p&gt;</span><span class="pln">"</span><span class="tag">&lt;span</span><span class="pln"> [</span><span class="atn">innerHTML</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"propertyTitle"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln">" is the </span><span class="tag">&lt;i&gt;</span><span class="pln">property bound</span><span class="tag">&lt;/i&gt;</span><span class="pln"> title.</span><span class="tag">&lt;/p&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">在许多情况下，插值是属性绑定的便捷替代法。当要把数据值渲染为字符串时，虽然可读性方面倾向于插值，但没有技术上的理由偏爱一种形式。但是，<em>将元素属性设置为非字符串的数据值时，必须使用属性绑定</em>。</p><p translation-origin="off">Interpolation is a convenient alternative to property binding in many cases. When rendering data values as strings, there is no technical reason to prefer one form to the other, though readability tends to favor interpolation. However, <em>when setting an element property to a non-string data value, you must use property binding</em>.</p><h3 id="content-security" translation-result="on">内容安全<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#content-security"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="content-security">Content security<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#content-security"><i class="material-icons">link</i></a></h3><p translation-result="on">假设如下<em>恶意内容</em></p><p translation-origin="off">Imagine the following malicious content.</p><code-example path="property-binding/src/app/app.component.ts" region="malicious-content" header="src/app/app.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">evilTitle = '<a href="" class="code-anchor">Template</a> &lt;script&gt;alert("evil never sleeps")&lt;/script&gt; Syntax';</div><header class="ng-star-inserted">src/app/app.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">evilTitle </span><span class="pun">=</span><span class="pln"> </span><span class="str">'</span><a href="" class="code-anchor"><span class="str">Template</span></a><span class="str"> &lt;script&gt;alert("evil never sleeps")&lt;/script&gt; Syntax'</span><span class="pun">;</span></code>
    </pre></aio-code></code-example><p translation-result="on">在组件模板中，内容可以与插值一起使用：</p><p translation-origin="off">In the component template, the content might be used with interpolation:</p><code-example path="property-binding/src/app/app.component.html" region="malicious-interpolated" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;p&gt;&lt;span&gt;"{{evilTitle}}" is the &lt;i&gt;interpolated&lt;/i&gt; evil title.&lt;/span&gt;&lt;/p&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;p&gt;&lt;span&gt;</span><span class="pln">"{{evilTitle}}" is the </span><span class="tag">&lt;i&gt;</span><span class="pln">interpolated</span><span class="tag">&lt;/i&gt;</span><span class="pln"> evil title.</span><span class="tag">&lt;/span&gt;&lt;/p&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">幸运的是，Angular 数据绑定对于危险的 HTML 高度戒备。在上述情况下，HTML 将按原样显示，而 Javascript 不执行。Angular <strong>不允许</strong>带有 <code>script</code> 标签的 HTML 泄漏到浏览器中，无论是插值还是属性绑定。</p><p translation-origin="off">Fortunately, Angular data binding is on alert for dangerous HTML. In the above case, the HTML displays as is, and the Javascript does not execute. Angular <strong>does not</strong> allow HTML with script tags to leak into the browser, neither with interpolation nor property binding.</p><p translation-result="on">不过，在下列示例中，Angular 会在显示值之前先对它们进行<a href="guide/security#sanitization-and-security-contexts">无害化处理</a> 。</p><p translation-origin="off">In the following example, however, Angular <a href="guide/security#sanitization-and-security-contexts">sanitizes</a> the values before displaying them.</p><code-example path="property-binding/src/app/app.component.html" region="malicious-content" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;!-- Angular generates a warning for the following line as it sanitizes them WARNING: sanitizing <a href="api/core/SecurityContext#HTML" class="code-anchor">HTML</a> stripped some content (see http://g.co/ng/security#xss). --&gt; &lt;p&gt;"&lt;span [innerHTML]="evilTitle"&gt;&lt;/span&gt;" is the &lt;i&gt;property bound&lt;/i&gt; evil title.&lt;/p&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">&lt;!--
 Angular generates a warning for the following line as it sanitizes them
 WARNING: sanitizing </span><a href="api/core/SecurityContext#HTML" class="code-anchor"><span class="com">HTML</span></a><span class="com"> stripped some content (see http://g.co/ng/security#xss).
--&gt;</span><span class="pln">
 </span><span class="tag">&lt;p&gt;</span><span class="pln">"</span><span class="tag">&lt;span</span><span class="pln"> [</span><span class="atn">innerHTML</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"evilTitle"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln">" is the </span><span class="tag">&lt;i&gt;</span><span class="pln">property bound</span><span class="tag">&lt;/i&gt;</span><span class="pln"> evil title.</span><span class="tag">&lt;/p&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">插值处理 <code>&lt;script&gt;</code> 标记与属性绑定的方式不同，但是这两种方法都可以使内容无害。以下是 <code>evilTitle</code> 示例的浏览器输出。</p><p translation-origin="off">Interpolation handles the <code>&lt;script&gt;</code> tags differently than property binding but both approaches render the content harmlessly. The following is the browser output of the <code>evilTitle</code> examples.</p><code-example language="bash" ng-version="9.0.0-rc.11"><div style="display:none">"Template<script>alert("evil never sleeps")</script>Syntax" is the interpolated evil title. "Template alert("evil never sleeps")Syntax" is the property bound evil title.</div><aio-code><pre class="lang-bash prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"Template </span><script><span class="str">alert('evil never sleeps');</span></script><span class="str"> Syntax"</span><span class="pln"> is the interpolated evil title</span><span class="pun">.</span><span class="pln">
</span><span class="str">"Template alert("</span><span class="pln">evil never sleeps</span><span class="str">")Syntax"</span><span class="pln"> is the property bound evil title</span><span class="pun">.</span></code>
    </pre></aio-code></code-example><hr><a id="other-bindings"></a><h2 id="attribute-class-and-style-bindings" translation-result="on">attribute、class 和 style 绑定<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#attribute-class-and-style-bindings"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="attribute-class-and-style-bindings">Attribute, class, and style bindings<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#attribute-class-and-style-bindings"><i class="material-icons">link</i></a></h2><p translation-result="on">模板语法为那些不太适合使用属性绑定的场景提供了专门的单向数据绑定形式。</p><p translation-origin="off">The template syntax provides specialized one-way bindings for scenarios less well-suited to property binding.</p><p translation-result="on">要在运行中的应用查看 Attribute 绑定、类绑定和样式绑定，请参见<live-example name="attribute-binding" ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="现场演练" href="generated/live-examples/attribute-binding/stackblitz.html">现场演练</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/attribute-binding/attribute-binding.zip">下载范例</a></span></span></span></live-example>特别是对于本节。</p><p translation-origin="off">To see attribute, class, and style bindings in a functioning app, see the<live-example name="attribute-binding" ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="现场演练" href="generated/live-examples/attribute-binding/stackblitz.html">现场演练</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/attribute-binding/attribute-binding.zip">下载范例</a></span></span></span></live-example>especially for this section.</p><h3 id="attribute-binding" translation-result="on">attribute 绑定<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#attribute-binding"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="attribute-binding">Attribute binding<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#attribute-binding"><i class="material-icons">link</i></a></h3><p translation-result="on">可以直接使用 <strong>Attribute 绑定</strong>设置 Attribute 的值。一般来说，绑定时设置的是目标的 Property，而 Attribute 绑定是唯一的例外，它创建和设置的是 Attribute。</p><p translation-origin="off">Set the value of an attribute directly with an <strong>attribute binding</strong>. This is the only exception to the rule that a binding sets a target property and the only binding that creates and sets an attribute.</p><p translation-result="on">通常，使用 <a href="guide/template-syntax#property-binding">Property 绑定</a>设置元素的 Property 优于使用字符串设置 Attribute。但是，有时没有要绑定的元素的 Property，所以其解决方案就是 Attribute 绑定。</p><p translation-origin="off">Usually, setting an element property with a <a href="guide/template-syntax#property-binding">property binding</a> is preferable to setting the attribute with a string. However, sometimes there is no element property to bind, so attribute binding is the solution.</p><p translation-result="on">考虑 <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">ARIA</a> 和 <a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a> 。它们都纯粹是 Attribute，不对应于元素的 Property，也不能设置元素的 Property。 在这些情况下，就没有要绑定到的目标 Property。</p><p translation-origin="off">Consider the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">ARIA</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a>. They are purely attributes, don't correspond to element properties, and don't set element properties. In these cases, there are no property targets to bind to.</p><p translation-result="on">Attribute 绑定的语法类似于 Property 绑定，但其括号之间不是元素的 Property，而是由前缀 <code>attr</code>、点（ <code>.</code> ）和 Attribute 名称组成。然后，您就可以使用能解析为字符串的表达式来设置该 Attribute 的值，或者当表达式解析为 <code>null</code> 时删除该 Attribute。</p><p translation-origin="off">Attribute binding syntax resembles property binding, but instead of an element property between brackets, start with the prefix <code>attr</code>, followed by a dot (<code>.</code>), and the name of the attribute. You then set the attribute value, using an expression that resolves to a string, or remove the attribute when the expression resolves to <code>null</code>.</p><p translation-result="on">attribute 绑定的主要用例之一是设置 ARIA attribute（译注：ARIA 指无障碍功能，用于给残障人士访问互联网提供便利）， 就像这个例子中一样：</p><p translation-origin="off">One of the primary use cases for attribute binding is to set ARIA attributes, as in this example:</p><code-example path="attribute-binding/src/app/app.component.html" region="attrib-binding-aria" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;!-- create and set an aria attribute for assistive technology --&gt; &lt;button [attr.aria-label]="actionName"&gt;{{actionName}} with Aria&lt;/button&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">&lt;!-- create and set an aria attribute for assistive technology --&gt;</span><span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> [</span><span class="atn">attr</span><span class="pln">.</span><span class="atn">aria-label</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"actionName"</span><span class="tag">&gt;</span><span class="pln">{{actionName}} with Aria</span><span class="tag">&lt;/button&gt;</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><h4 id="colspan-and-colspan" translation-result="on"><code>colspan</code> 和 <code>colSpan</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#colspan-and-colspan"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="colspan-and-colspan"><code>colspan</code> and <code>colSpan</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#colspan-and-colspan"><i class="material-icons">link</i></a></h4><p translation-result="on">注意 <code>colspan</code> Attribute 和 <code>colSpan</code> Property 之间的区别。</p><p translation-origin="off">Notice the difference between the <code>colspan</code> attribute and the <code>colSpan</code> property.</p><p translation-result="on">如果您这样写：</p><p translation-origin="off">If you wrote something like this:</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;tr&gt;&lt;td colspan="{{1 + 1}}"&gt;Three-Four&lt;/td&gt;&lt;/tr&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;tr&gt;&lt;td</span><span class="pln"> </span><span class="atn">colspan</span><span class="pun">=</span><span class="atv">"{{1 + 1}}"</span><span class="tag">&gt;</span><span class="pln">Three-Four</span><span class="tag">&lt;/td&gt;&lt;/tr&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">您会收到如下错误：</p><p translation-origin="off">You'd get this error:</p><code-example language="bash" ng-version="9.0.0-rc.11"><div style="display:none">Template parse errors: Can't bind to 'colspan' since it isn't a known native property</div><aio-code><pre class="lang-bash prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="typ">Template</span><span class="pln"> parse errors</span><span class="pun">:</span><span class="pln">
</span><span class="typ">Can</span><span class="str">'t bind to '</span><span class="pln">colspan</span><span class="str">' since it isn'</span><span class="pln">t a known native property</span></code>
    </pre></aio-code></code-example><p translation-result="on">如错误消息所示，<code>&lt;td&gt;</code> 元素没有 <code>colspan</code> 这个 Property。这是正确的，因为 <code>colspan</code> 是一个 Attribute，而 <code>colSpan</code> （<code>colSpan</code> 中的 <code>S</code> 是大写）则是相应的 Property。插值和 Property 绑定只能设置 <em>Property</em> ，不能设置 Attribute。</p><p translation-origin="off">As the message says, the <code>&lt;td&gt;</code> element does not have a <code>colspan</code> property. This is true because <code>colspan</code> is an attribute—<code>colSpan</code>, with a capital <code>S</code>, is the corresponding property. Interpolation and property binding can set only <em>properties</em>, not attributes.</p><p translation-result="on">相反，您可以使用 Property 绑定并将其改写为：</p><p translation-origin="off">Instead, you'd use property binding and write it like this:</p><code-example path="attribute-binding/src/app/app.component.html" region="colSpan" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;!-- Notice the colSpan property is camel case --&gt; &lt;tr&gt;&lt;td [colSpan]="1 + 1"&gt;Three-Four&lt;/td&gt;&lt;/tr&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">&lt;!-- Notice the colSpan property is camel case --&gt;</span><span class="pln">
</span><span class="tag">&lt;tr&gt;&lt;td</span><span class="pln"> [</span><span class="atn">colSpan</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"1 + 1"</span><span class="tag">&gt;</span><span class="pln">Three-Four</span><span class="tag">&lt;/td&gt;&lt;/tr&gt;</span></code>
    </pre></aio-code></code-example></div><hr><h3 id="class-binding" translation-result="on">类绑定<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#class-binding"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="class-binding">Class binding<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#class-binding"><i class="material-icons">link</i></a></h3><p translation-result="on">下面是在普通 HTML 中不用绑定来设置 <code>class</code> Attribute 的方法：</p><p translation-origin="off">Here's how to set the <code>class</code> attribute without a binding in plain HTML:</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;!-- standard class attribute setting --&gt; &lt;div class="foo bar"&gt;Some text&lt;/div&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">&lt;!-- standard class attribute setting --&gt;</span><span class="pln">

</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"foo bar"</span><span class="tag">&gt;</span><span class="pln">Some text</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">你还可以使用<strong>类绑定</strong>来为一个元素添加和移除 CSS 类。</p><p translation-origin="off">You can also add and remove CSS class names from an element's <code>class</code> attribute with a <strong>class binding</strong>.</p><p translation-result="on">要创建单个类的绑定，请使用 <code>class</code> 前缀，紧跟一个点（<code>.</code>），再跟上 CSS 类名，比如 <code>[class.foo]="hasFoo"</code>。 当绑定表达式为真值的时候，Angular 就会加上这个类，为假值则会移除，但 <code>undefined</code> 是假值中的例外，参见<a href="guide/template-syntax#styling-delegation">样式委派</a> 部分。</p><p translation-origin="off">To create a single class binding, start with the prefix <code>class</code> followed by a dot (<code>.</code>) and the name of the CSS class (for example, <code>[class.foo]="hasFoo"</code>). Angular adds the class when the bound expression is truthy, and it removes the class when the expression is falsy (with the exception of <code>undefined</code>, see <a href="guide/template-syntax#styling-delegation">styling delegation</a>).</p><p translation-result="on">要想创建多个类的绑定，请使用通用的 <code>[class]</code> 形式来绑定类，而不要带点，比如 <code>[class]="classExpr"</code>。 该表达式可以是空格分隔的类名字符串，或者用一个以类名为键、真假值表达式为值的对象。 当使用对象格式时，Angular 只会加上那些相关的值为真的类名。</p><p translation-origin="off">To create a binding to multiple classes, use a generic <code>[class]</code> binding without the dot (for example, <code>[class]="classExpr"</code>). The expression can be a space-delimited string of class names, or you can format it as an object with class names as the keys and truthy/falsy expressions as the values. With object format, Angular will add a class only if its associated value is truthy.</p><p translation-result="on">一定要注意，在对象型表达式中（如 <code>object</code>、<code>Array</code>、<code>Map</code>、<code>Set</code> 等），当这个类列表改变时，对象的引用也必须修改。仅仅修改其属性而不修改对象引用是无法生效的。</p><p translation-origin="off">It's important to note that with any object-like expression (<code>object</code>, <code>Array</code>, <code>Map</code>, <code>Set</code>, etc), the identity of the object must change for the class list to be updated. Updating the property without changing object identity will have no effect.</p><p translation-result="on">如果有多处绑定到了同一个类名，出现的冲突将根据<a href="guide/template-syntax#styling-precedence">样式的优先级规则</a>进行解决。</p><p translation-origin="off">If there are multiple bindings to the same class name, conflicts are resolved using <a href="guide/template-syntax#styling-precedence">styling precedence</a>.</p><style>td,th{vertical-align:top}</style><table width="100%"><colgroup><col width="15%"><col width="20%"><col width="35%"><col width="30%"></colgroup><tbody><tr><th><p translation-result="on">绑定类型</p><p translation-origin="off">Binding Type</p></th><th><p translation-result="on">语法</p><p translation-origin="off">Syntax</p></th><th><p translation-result="on">输入类型</p><p translation-origin="off">Input Type</p></th><th><p translation-result="on">输入值范例</p><p translation-origin="off">Example Input Values</p></th></tr><tr><td><p translation-result="on">单个类绑定</p><p translation-origin="off">Single class binding</p></td><td><code>[class.foo]="hasFoo"</code></td><td><code>boolean | undefined | null</code></td><td><code>true</code>, <code>false</code></td></tr><tr><td rowspan="3"><p translation-result="on">多个类绑定</p><p translation-origin="off">Multi-class binding</p></td><td rowspan="3"><code>[class]="classExpr"</code></td><td><code>string</code></td><td><code>"my-class-1 my-class-2 my-class-3"</code></td></tr><tr><td><code>{[key: string]: boolean | undefined | null}</code></td><td><code>{foo: true, bar: false}</code></td></tr><tr><td><code>Array</code>&lt;<code>string</code>&gt;</td><td><code>['foo', 'bar']</code></td></tr></tbody></table><p translation-result="on">尽管此技术适用于切换单个类名，但在需要同时管理多个类名时请考虑使用 <a href="guide/template-syntax#ngClass"><code>NgClass</code></a>指令。</p><p translation-origin="off">The <a href="guide/template-syntax#ngclass">NgClass</a> directive can be used as an alternative to direct <code>[class]</code> bindings. However, using the above class binding syntax without <code><a href="api/common/NgClass" class="code-anchor">NgClass</a></code> is preferred because due to improvements in class binding in Angular, <code><a href="api/common/NgClass" class="code-anchor">NgClass</a></code> no longer provides significant value, and might eventually be removed in the future.</p><hr><h3 id="style-binding" translation-result="on">样式绑定<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#style-binding"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="style-binding">Style binding<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#style-binding"><i class="material-icons">link</i></a></h3><p translation-result="on">下面演示了如何不通过绑定在普通 HTML 中设置 <code><a href="api/animations/style" class="code-anchor">style</a></code> 属性：</p><p translation-origin="off">Here's how to set the <code><a href="api/animations/style" class="code-anchor">style</a></code> attribute without a binding in plain HTML:</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;!-- standard <a href="api/animations/style" class="code-anchor">style</a> attribute setting --&gt; &lt;div <a href="api/animations/style" class="code-anchor">style</a>="color: blue"&gt;Some text&lt;/div&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">&lt;!-- standard </span><a href="api/animations/style" class="code-anchor"><span class="com">style</span></a><span class="com"> attribute setting --&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><a href="api/animations/style" class="code-anchor"><span class="atn">style</span></a><span class="pun">=</span><span class="atv">"</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> blue</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">Some text</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">你还可以通过<strong>样式绑定</strong>来动态设置样式。</p><p translation-origin="off">You can also set styles dynamically with a <strong>style binding</strong>.</p><p translation-result="on">要想创建单个样式的绑定，请以 <code><a href="api/animations/style" class="code-anchor">style</a></code> 前缀开头，紧跟一个点（<code>.</code>），再跟着 CSS 样式的属性名，比如 <code>[style.width]="width"</code>。 该属性将会被设置为绑定表达式的值，该值通常为字符串。 不过你还可以添加一个单位表达式，比如 <code>em</code> 或 <code>%</code>，这时候该值就要是一个 <code><a href="api/common/DecimalPipe" class="code-anchor">number</a></code> 类型。</p><p translation-origin="off">To create a single style binding, start with the prefix <code><a href="api/animations/style" class="code-anchor">style</a></code> followed by a dot (<code>.</code>) and the name of the CSS style property (for example, <code>[style.width]="width"</code>). The property will be set to the value of the bound expression, which is normally a string. Optionally, you can add a unit extension like <code>em</code> or <code>%</code>, which requires a number type.</p><div class="alert is-helpful"><p translation-result="on">注意，<em>样式属性</em>命名方法可以用<a href="guide/glossary#dash-case">中线命名法</a>，像上面的一样 也可以用<a href="guide/glossary#camelcase">驼峰式命名法</a>，如 <code>fontSize</code>。</p><p translation-origin="off">Note that a <em>style property</em> name can be written in either <a href="guide/glossary#dash-case">dash-case</a>, as shown above, or <a href="guide/glossary#camelcase">camelCase</a>, such as <code>fontSize</code>.</p></div><p translation-result="on">如果要切换多个样式，你可以直接绑定到 <code>[<a href="api/animations/style" class="code-anchor">style</a>]</code> 属性而不用点（比如， <code>[<a href="api/animations/style" class="code-anchor">style</a>]="styleExpr"</code>）。赋给 <code>[<a href="api/animations/style" class="code-anchor">style</a>]</code> 的绑定表达式通常是一系列样式组成的字符串，比如 <code>"width: 100px; height: 100px;"</code> 。</p><p translation-origin="off">If there are multiple styles you'd like to toggle, you can bind to the <code>[<a href="api/animations/style" class="code-anchor">style</a>]</code> property directly without the dot (for example, <code>[<a href="api/animations/style" class="code-anchor">style</a>]="styleExpr"</code>). The expression attached to the <code>[<a href="api/animations/style" class="code-anchor">style</a>]</code> binding is most often a string list of styles like <code>"width: 100px; height: 100px;"</code>.</p><p translation-result="on">你也可以把该表达式格式化成一个以样式名为键、以样式值为值的对象，比如 <code>{width: '100px', height: '100px'}</code> 。一定要注意，对于任何对象型的表达式（ 如 <code>object</code> ， <code>Array</code> ， <code>Map</code> ， <code>Set</code> 等），当这个样式列表改变时，对象的引用也必须修改。仅仅修改其属性而不修改对象引用是无法生效的。。</p><p translation-origin="off">You can also format the expression as an object with style names as the keys and style values as the values, like <code>{width: '100px', height: '100px'}</code>. It's important to note that with any object-like expression (<code>object</code>, <code>Array</code>, <code>Map</code>, <code>Set</code>, etc), the identity of the object must change for the class list to be updated. Updating the property without changing object identity will have no effect.</p><p translation-result="on">如果有多处绑定了同一个样式属性，则会使用<a href="guide/template-syntax#styling-precedence">样式的优先级规则</a>来解决冲突。</p><p translation-origin="off">If there are multiple bindings to the same style property, conflicts are resolved using <a href="guide/template-syntax#styling-precedence">styling precedence rules</a>.</p><style>td,th{vertical-align:top}</style><table width="100%"><colgroup><col width="15%"><col width="20%"><col width="35%"><col width="30%"></colgroup><tbody><tr><th><p translation-result="on">绑定类型</p><p translation-origin="off">Binding Type</p></th><th><p translation-result="on">语法</p><p translation-origin="off">Syntax</p></th><th><p translation-result="on">输入类型</p><p translation-origin="off">Input Type</p></th><th><p translation-result="on">输入值范例</p><p translation-origin="off">Example Input Values</p></th></tr><tr><td><p translation-result="on">单一样式绑定</p><p translation-origin="off">Single style binding</p></td><td><code>[style.width]="width"</code></td><td><code>string | undefined | null</code></td><td><code>"100px"</code></td></tr><tr></tr><tr><td><p translation-result="on">带单位的单一样式绑定</p><p translation-origin="off">Single style binding with units</p></td><td><code>[style.width.px]="width"</code></td><td><code>number | undefined | null</code></td><td><code>100</code></td></tr><tr><td rowspan="3"><p translation-result="on">多个样式绑定</p><p translation-origin="off">Multi-style binding</p></td><td rowspan="3"><code>[<a href="api/animations/style" class="code-anchor">style</a>]="styleExpr"</code></td><td><code>string</code></td><td><code>"width: 100px; height: 100px"</code></td></tr><tr><td><code>{[key: string]: string | undefined | null}</code></td><td><code>{width: '100px', height: '100px'}</code></td></tr><tr><td><code>Array</code>&lt;<code>string</code>&gt;</td><td><code>['width', '100px']</code></td></tr></tbody></table><p translation-result="on"><a href="guide/template-syntax#ngstyle">NgStyle</a> 指令可以作为 <code>[<a href="api/animations/style" class="code-anchor">style</a>]</code> 绑定的替代指令。但是，应该把上面这种 <code>[<a href="api/animations/style" class="code-anchor">style</a>]</code> 样式绑定语法作为首选，因为随着 Angular 中样式绑定的改进，<code><a href="api/common/NgStyle" class="code-anchor">NgStyle</a></code> 将不再提供重要的价值，并最终在未来的某个版本中删除。</p><p translation-origin="off">The <a href="guide/template-syntax#ngstyle">NgStyle</a> directive can be used as an alternative to direct <code>[<a href="api/animations/style" class="code-anchor">style</a>]</code> bindings. However, using the above style binding syntax without <code><a href="api/common/NgStyle" class="code-anchor">NgStyle</a></code> is preferred because due to improvements in style binding in Angular, <code><a href="api/common/NgStyle" class="code-anchor">NgStyle</a></code> no longer provides significant value, and might eventually be removed in the future.</p><hr><a id="styling-precedence"></a><h3 id="styling-precedence" translation-result="on">样式的优先级规则<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#styling-precedence"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="styling-precedence">Styling Precedence<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#styling-precedence"><i class="material-icons">link</i></a></h3><p translation-result="on">一个 HTML 元素可以把它的 CSS 类列表和样式值绑定到多个来源（例如，来自多个指令的宿主 <code><a href="api/core/Directive#host" class="code-anchor">host</a></code> 绑定）。</p><p translation-origin="off">A single HTML element can have its CSS class list and style values bound to a multiple sources (for example, host bindings from multiple directives).</p><p translation-result="on">当对同一个类名或样式属性存在多个绑定时，Angular 会使用一组优先级规则来解决冲突，并确定最终哪些类或样式会应用到该元素中。</p><p translation-origin="off">When there are multiple bindings to the same class name or style property, Angular uses a set of precedence rules to resolve conflicts and determine which classes or styles are ultimately applied to the element.</p><div class="alert is-helpful"><h4 id="styling-precedence-highest-to-lowest" translation-result="on">样式的优先级规则（从高到低）<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#styling-precedence-highest-to-lowest"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="styling-precedence-highest-to-lowest">Styling precedence (highest to lowest)<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#styling-precedence-highest-to-lowest"><i class="material-icons">link</i></a></h4><ol><li><p translation-result="on">模板绑定</p><p translation-origin="off">Template bindings</p></li></ol><ol><li><p translation-result="on">属性绑定（例如 <code>&lt;div [class.foo]="hasFoo"&gt;</code> 或 <code>&lt;div [style.color]="color"&gt;</code>）</p><p translation-origin="off">Property binding (for example, <code>&lt;div [class.foo]="hasFoo"&gt;</code> or <code>&lt;div [style.color]="color"&gt;</code>)</p></li><li><p translation-result="on">Map 绑定（例如，<code>&lt;div [class]="classExpr"&gt;</code> 或 <code>&lt;div [<a href="api/animations/style" class="code-anchor">style</a>]="styleExpr"&gt;</code> ）</p><p translation-origin="off">Map binding (for example, <code>&lt;div [class]="classExpr"&gt;</code> or <code>&lt;div [<a href="api/animations/style" class="code-anchor">style</a>]="styleExpr"&gt;</code>)</p></li><li><p translation-result="on">静态值（例如 <code>&lt;div class="foo"&gt;</code> 或 <code>&lt;div <a href="api/animations/style" class="code-anchor">style</a>="color: blue"&gt;</code> ）</p><p translation-origin="off">Static value (for example, <code>&lt;div class="foo"&gt;</code> or <code>&lt;div <a href="api/animations/style" class="code-anchor">style</a>="color: blue"&gt;</code>)</p></li><li><p translation-result="on">指令宿主绑定</p><p translation-origin="off">Directive host bindings</p></li></ol><ol><li><p translation-result="on">属性绑定（例如，<code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'[class.foo]': 'hasFoo'}</code> 或 <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'[style.color]': 'color'}</code> ）</p><p translation-origin="off">Property binding (for example, <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'[class.foo]': 'hasFoo'}</code> or <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'[style.color]': 'color'}</code>)</p></li><li><p translation-result="on">Map 绑定（例如， <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'[class]': 'classExpr'}</code> 或者 <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'[<a href="api/animations/style" class="code-anchor">style</a>]': 'styleExpr'}</code> ）</p><p translation-origin="off">Map binding (for example, <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'[class]': 'classExpr'}</code> or <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'[<a href="api/animations/style" class="code-anchor">style</a>]': 'styleExpr'}</code>)</p></li><li><p translation-result="on">静态值（例如， <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'class': 'foo'}</code> 或 <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'<a href="api/animations/style" class="code-anchor">style</a>': 'color: blue'}</code> ）</p><p translation-origin="off">Static value (for example, <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'class': 'foo'}</code> or <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'<a href="api/animations/style" class="code-anchor">style</a>': 'color: blue'}</code>)</p></li><li><p translation-result="on">组件宿主绑定</p><p translation-origin="off">Component host bindings</p></li></ol><ol><li><p translation-result="on">属性绑定（例如， <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'[class.foo]': 'hasFoo'}</code> 或 <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'[style.color]': 'color'}</code> ）</p><p translation-origin="off">Property binding (for example, <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'[class.foo]': 'hasFoo'}</code> or <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'[style.color]': 'color'}</code>)</p></li><li><p translation-result="on">Map 绑定（例如， <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'[class]': 'classExpr'}</code> 或者 <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'[<a href="api/animations/style" class="code-anchor">style</a>]': 'styleExpr'}</code> ）</p><p translation-origin="off">Map binding (for example, <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'[class]': 'classExpr'}</code> or <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'[<a href="api/animations/style" class="code-anchor">style</a>]': 'styleExpr'}</code>)</p></li><li><p translation-result="on">静态值（例如， <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'class': 'foo'}</code> 或 <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'<a href="api/animations/style" class="code-anchor">style</a>': 'color: blue'}</code> ）</p><p translation-origin="off">Static value (for example, <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'class': 'foo'}</code> or <code><a href="api/core/Directive#host" class="code-anchor">host</a>: {'<a href="api/animations/style" class="code-anchor">style</a>': 'color: blue'}</code>)</p></li></ol></div><p translation-result="on">某个类或样式绑定越具体，它的优先级就越高。</p><p translation-origin="off">The more specific a class or style binding is, the higher its precedence.</p><p translation-result="on">对具体类（例如 <code>[class.foo]</code> ）的绑定优先于一般化的 <code>[class]</code> 绑定，对具体样式（例如 <code>[style.bar]</code> ）的绑定优先于一般化的 <code>[<a href="api/animations/style" class="code-anchor">style</a>]</code> 绑定。</p><p translation-origin="off">A binding to a specific class (for example, <code>[class.foo]</code>) will take precedence over a generic <code>[class]</code> binding, and a binding to a specific style (for example, <code>[style.bar]</code>) will take precedence over a generic <code>[<a href="api/animations/style" class="code-anchor">style</a>]</code> binding.</p><code-example path="attribute-binding/src/app/app.component.html" region="basic-specificity" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;h3&gt;Basic specificity&lt;/h3&gt; &lt;!-- The `class.special` binding will override any value for the `special` class in `classExpr`. --&gt; &lt;div [class.special]="isSpecial" [class]="classExpr"&gt;Some text.&lt;/div&gt; &lt;!-- The `style.color` binding will override any value for the `color` property in `styleExpr`. --&gt; &lt;div [style.color]="color" [<a href="api/animations/style" class="code-anchor">style</a>]="styleExpr"&gt;Some text.&lt;/div&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h3&gt;</span><span class="pln">Basic specificity</span><span class="tag">&lt;/h3&gt;</span><span class="pln">

</span><span class="com">&lt;!-- The `class.special` binding will override any value for the `special` class in `classExpr`.  --&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> [</span><span class="atn">class</span><span class="pln">.</span><span class="atn">special</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"isSpecial"</span><span class="pln"> [</span><span class="atn">class</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"classExpr"</span><span class="tag">&gt;</span><span class="pln">Some text.</span><span class="tag">&lt;/div&gt;</span><span class="pln">

</span><span class="com">&lt;!-- The `style.color` binding will override any value for the `color` property in `styleExpr`.  --&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> [</span><span class="atn">style</span><span class="pln">.</span><span class="atn">color</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"color"</span><span class="pln"> [</span><a href="api/animations/style" class="code-anchor"><span class="atn">style</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"styleExpr"</span><span class="tag">&gt;</span><span class="pln">Some text.</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">当处理不同来源的绑定时，也适用这种基于具体度的规则。 某个元素可能在声明它的模板中有一些绑定、在所匹配的指令中有一些宿主绑定、在所匹配的组件中有一些宿主绑定。</p><p translation-origin="off">Specificity rules also apply when it comes to bindings that originate from different sources. It's possible for an element to have bindings in the template where it's declared, from host bindings on matched directives, and from host bindings on matched components.</p><p translation-result="on">模板中的绑定是最具体的，因为它们直接并且唯一地应用于该元素，所以它们具有最高的优先级。</p><p translation-origin="off">Template bindings are the most specific because they apply to the element directly and exclusively, so they have the highest precedence.</p><p translation-result="on">指令的宿主绑定被认为不太具体，因为指令可以在多个位置使用，所以它们的优先级低于模板绑定。</p><p translation-origin="off">Directive host bindings are considered less specific because directives can be used in multiple locations, so they have a lower precedence than template bindings.</p><p translation-result="on">指令经常会增强组件的行为，所以组件的宿主绑定优先级最低。</p><p translation-origin="off">Directives often augment component behavior, so host bindings from components have the lowest precedence.</p><code-example path="attribute-binding/src/app/app.component.html" region="source-specificity" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;h3&gt;Source specificity&lt;/h3&gt; &lt;!-- The `class.special` template binding will override any <a href="api/core/Directive#host" class="code-anchor">host</a> binding to the `special` class set by `dirWithClassBinding` or `comp-with-host-binding`.--&gt; &lt;comp-with-host-binding [class.special]="isSpecial" dirWithClassBinding&gt;Some text.&lt;/comp-with-host-binding&gt; &lt;!-- The `style.color` template binding will override any <a href="api/core/Directive#host" class="code-anchor">host</a> binding to the `color` property set by `dirWithStyleBinding` or `comp-with-host-binding`. --&gt; &lt;comp-with-host-binding [style.color]="color" dirWithStyleBinding&gt;Some text.&lt;/comp-with-host-binding&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h3&gt;</span><span class="pln">Source specificity</span><span class="tag">&lt;/h3&gt;</span><span class="pln">

</span><span class="com">&lt;!-- The `class.special` template binding will override any </span><a href="api/core/Directive#host" class="code-anchor"><span class="com">host</span></a><span class="com"> binding to the `special` class set by `dirWithClassBinding` or `comp-with-host-binding`.--&gt;</span><span class="pln">
</span><span class="tag">&lt;comp-with-host-binding</span><span class="pln"> [</span><span class="atn">class</span><span class="pln">.</span><span class="atn">special</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"isSpecial"</span><span class="pln"> </span><span class="atn">dirWithClassBinding</span><span class="tag">&gt;</span><span class="pln">Some text.</span><span class="tag">&lt;/comp-with-host-binding&gt;</span><span class="pln">

</span><span class="com">&lt;!-- The `style.color` template binding will override any </span><a href="api/core/Directive#host" class="code-anchor"><span class="com">host</span></a><span class="com"> binding to the `color` property set by `dirWithStyleBinding` or `comp-with-host-binding`. --&gt;</span><span class="pln">
</span><span class="tag">&lt;comp-with-host-binding</span><span class="pln"> [</span><span class="atn">style</span><span class="pln">.</span><span class="atn">color</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"color"</span><span class="pln"> </span><span class="atn">dirWithStyleBinding</span><span class="tag">&gt;</span><span class="pln">Some text.</span><span class="tag">&lt;/comp-with-host-binding&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">另外，绑定总是优先于静态属性。</p><p translation-origin="off">In addition, bindings take precedence over static attributes.</p><p translation-result="on">在下面的例子中， <code>class</code> 和 <code>[class]</code> 具有相似的具体度，但 <code>[class]</code> 绑定优先，因为它是动态的。</p><p translation-origin="off">In the following case, <code>class</code> and <code>[class]</code> have similar specificity, but the <code>[class]</code> binding will take precedence because it is dynamic.</p><code-example path="attribute-binding/src/app/app.component.html" region="dynamic-priority" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;h3&gt;<a href="" class="code-anchor">Dynamic</a> vs <a href="api/upgrade/static" class="code-anchor">static</a>&lt;/h3&gt; &lt;!-- If `classExpr` has a value for the `special` class, this value will override the `class="special"` below --&gt; &lt;div class="special" [class]="classExpr"&gt;Some text.&lt;/div&gt; &lt;!-- If `styleExpr` has a value for the `color` property, this value will override the `<a href="api/animations/style" class="code-anchor">style</a>="color: blue"` below --&gt; &lt;div <a href="api/animations/style" class="code-anchor">style</a>="color: blue" [<a href="api/animations/style" class="code-anchor">style</a>]="styleExpr"&gt;Some text.&lt;/div&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h3&gt;</span><a href="" class="code-anchor"><span class="pln">Dynamic</span></a><span class="pln"> vs </span><a href="api/upgrade/static" class="code-anchor"><span class="pln">static</span></a><span class="tag">&lt;/h3&gt;</span><span class="pln">

</span><span class="com">&lt;!-- If `classExpr` has a value for the `special` class, this value will override the `class="special"` below --&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"special"</span><span class="pln"> [</span><span class="atn">class</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"classExpr"</span><span class="tag">&gt;</span><span class="pln">Some text.</span><span class="tag">&lt;/div&gt;</span><span class="pln">

</span><span class="com">&lt;!-- If `styleExpr` has a value for the `color` property, this value will override the `</span><a href="api/animations/style" class="code-anchor"><span class="com">style</span></a><span class="com">="color: blue"` below --&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><a href="api/animations/style" class="code-anchor"><span class="atn">style</span></a><span class="pun">=</span><span class="atv">"</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> blue</span><span class="atv">"</span><span class="pln"> [</span><a href="api/animations/style" class="code-anchor"><span class="atn">style</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"styleExpr"</span><span class="tag">&gt;</span><span class="pln">Some text.</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><a id="styling-delegation"></a><h3 id="delegating-to-styles-with-lower-precedence" translation-result="on">委托优先级较低的样式<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#delegating-to-styles-with-lower-precedence"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="delegating-to-styles-with-lower-precedence">Delegating to styles with lower precedence<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#delegating-to-styles-with-lower-precedence"><i class="material-icons">link</i></a></h3><p translation-result="on">更高优先级的样式可以使用 <code>undefined</code> 值“委托”给低级的优先级样式。虽然把 style 属性设置为 <code>null</code> 可以确保该样式被移除，但把它设置为 <code>undefined</code> 会导致 Angular 回退到该样式的次高优先级。</p><p translation-origin="off">It is possible for higher precedence styles to "delegate" to lower precedence styles using <code>undefined</code> values. Whereas setting a style property to <code>null</code> ensures the style is removed, setting it to <code>undefined</code> will cause Angular to fall back to the next-highest precedence binding to that style.</p><p translation-result="on">例如，考虑以下模板：</p><p translation-origin="off">For example, consider the following template:</p><code-example path="attribute-binding/src/app/app.component.html" region="style-delegation" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;comp-with-host-binding dirWithHostBinding&gt;&lt;/comp-with-host-binding&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;comp-with-host-binding</span><span class="pln"> </span><span class="atn">dirWithHostBinding</span><span class="tag">&gt;&lt;/comp-with-host-binding&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">想象一下， <code>dirWithHostBinding</code> 指令和 <code>comp-with-host-binding</code> 组件都有 <code>[style.width]</code> 宿主绑定。在这种情况下，如果 <code>dirWithHostBinding</code> 把它的绑定设置为 <code>undefined</code> ，则 <code>width</code> 属性将回退到 <code>comp-with-host-binding</code> 主机绑定的值。但是，如果 <code>dirWithHostBinding</code> 把它的绑定设置为 <code>null</code> ，那么 <code>width</code> 属性就会被完全删除。</p><p translation-origin="off">Imagine that the <code>dirWithHostBinding</code> directive and the <code>comp-with-host-binding</code> component both have a <code>[style.width]</code> host binding. In that case, if <code>dirWithHostBinding</code> sets its binding to <code>undefined</code>, the <code>width</code> property will fall back to the value of the <code>comp-with-host-binding</code> host binding. However, if <code>dirWithHostBinding</code> sets its binding to <code>null</code>, the <code>width</code> property will be removed entirely.</p><a id="event-binding"></a><h2 id="event-binding-event" translation-result="on">事件绑定 <code>(event)</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#event-binding-event"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="event-binding-event">Event binding <code>(event)</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#event-binding-event"><i class="material-icons">link</i></a></h2><p translation-result="on">事件绑定允许你监听某些事件，比如按键、鼠标移动、点击和触屏。要查看本节中所有要点的演示，请参见<live-example name="event-binding" ng-version="9.0.0-rc.11"><span style="display:none">事件绑定范例</span><span><span class="ng-star-inserted"><a target="_blank" title="事件绑定范例" href="generated/live-examples/event-binding/stackblitz.html">事件绑定范例</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/event-binding/event-binding.zip">下载范例</a></span></span></span></live-example>。</p><p translation-origin="off">Event binding allows you to listen for certain events such as keystrokes, mouse movements, clicks, and touches. For an example demonstrating all of the points in this section, see the<live-example name="event-binding" ng-version="9.0.0-rc.11"><span style="display:none">event binding example</span><span><span class="ng-star-inserted"><a target="_blank" title="event binding example" href="generated/live-examples/event-binding/stackblitz.html">event binding example</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/event-binding/event-binding.zip">下载范例</a></span></span></span></live-example>.</p><p translation-result="on">Angular 的事件绑定语法由等号左侧带圆括号的<strong>目标事件</strong>和右侧引号中的<a href="guide/template-syntax#template-statements">模板语句</a>组成。 下面事件绑定监听按钮的点击事件。每当点击发生时，都会调用组件的 <code>onSave()</code> 方法。</p><p translation-origin="off">Angular event binding syntax consists of a <strong>target event</strong> name within parentheses on the left of an equal sign, and a quoted template statement on the right. The following event binding listens for the button's click events, calling the component's <code>onSave()</code> method whenever a click occurs:</p><div class="lightbox"><img src="generated/images/guide/template-syntax/syntax-diagram.svg" alt="Syntax diagram" width="600" height="125"></div><h3 id="target-event" translation-result="on">目标事件<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#target-event"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="target-event">Target event<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#target-event"><i class="material-icons">link</i></a></h3><p translation-result="on">如前所述，其目标就是此按钮的单击事件。</p><p translation-origin="off">As above, the target is the button's click event.</p><code-example path="event-binding/src/app/app.component.html" region="event-binding-1" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;button (click)="onSave($event)"&gt;Save&lt;/button&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"onSave($event)"</span><span class="tag">&gt;</span><span class="pln">Save</span><span class="tag">&lt;/button&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">有些人更喜欢带 <code>on-</code> 前缀的备选形式，称之为<strong>规范形式</strong>：</p><p translation-origin="off">Alternatively, use the <code>on-</code> prefix, known as the canonical form:</p><code-example path="event-binding/src/app/app.component.html" region="event-binding-2" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;button on-click="onSave($event)"&gt;on-click Save&lt;/button&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">on-click</span><span class="pun">=</span><span class="atv">"onSave($event)"</span><span class="tag">&gt;</span><span class="pln">on-click Save</span><span class="tag">&lt;/button&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">元素事件可能是更常见的目标，但 Angular 会先看这个名字是否能匹配上已知指令的事件属性，就像下面这个例子：</p><p translation-origin="off">Element events may be the more common targets, but Angular looks first to see if the name matches an event property of a known directive, as it does in the following example:</p><code-example path="event-binding/src/app/app.component.html" region="custom-directive" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;h4&gt;myClick is an event on the custom ClickDirective:&lt;/h4&gt; &lt;button (myClick)="clickMessage=$event" clickable&gt;click with myClick&lt;/button&gt; {{clickMessage}}</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h4&gt;</span><span class="pln">myClick is an event on the custom ClickDirective:</span><span class="tag">&lt;/h4&gt;</span><span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">myClick</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"clickMessage=$event"</span><span class="pln"> </span><span class="atn">clickable</span><span class="tag">&gt;</span><span class="pln">click with myClick</span><span class="tag">&lt;/button&gt;</span><span class="pln">
{{clickMessage}}</span></code>
    </pre></aio-code></code-example><p translation-result="on">如果这个名字没能匹配到元素事件或已知指令的输出属性，Angular 就会报“未知指令”错误。</p><p translation-origin="off">If the name fails to match an element event or an output property of a known directive, Angular reports an “unknown directive” error.</p><h3 id="event-and-event-handling-statements" translation-result="on"><em>$event</em> 和事件处理语句<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#event-and-event-handling-statements"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="event-and-event-handling-statements"><em>$event</em> and event handling statements<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#event-and-event-handling-statements"><i class="material-icons">link</i></a></h3><p translation-result="on">在事件绑定中，Angular 会为目标事件设置事件处理器。</p><p translation-origin="off">In an event binding, Angular sets up an event handler for the target event.</p><p translation-result="on">当事件发生时，这个处理器会执行模板语句。 典型的模板语句通常涉及到响应事件执行动作的接收器，例如从 HTML 控件中取得值，并存入模型。</p><p translation-origin="off">When the event is raised, the handler executes the template statement. The template statement typically involves a receiver, which performs an action in response to the event, such as storing a value from the HTML control into a model.</p><p translation-result="on">绑定会通过<strong>名叫 <code>$event</code> 的事件对象</strong>传递关于此事件的信息（包括数据值）。</p><p translation-origin="off">The binding conveys information about the event. This information can include data values such as an event object, string, or number named <code>$event</code>.</p><p translation-result="on">事件对象的形态取决于目标事件。如果目标事件是原生 DOM 元素事件， <code>$event</code> 就是 <a href="https://developer.mozilla.org/en-US/docs/Web/Events">DOM 事件对象</a>，它有像 <code><a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a></code> 和 <code>target.value</code> 这样的属性。</p><p translation-origin="off">The target event determines the shape of the <code>$event</code> object. If the target event is a native DOM element event, then <code>$event</code> is a <a href="https://developer.mozilla.org/en-US/docs/Web/Events">DOM event object</a>, with properties such as <code><a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a></code> and <code>target.value</code>.</p><p translation-result="on">考虑这个范例：</p><p translation-origin="off">Consider this example:</p><code-example path="event-binding/src/app/app.component.html" region="event-binding-3" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;input [value]="currentItem.name" (input)="currentItem.name=$event.target.value" &gt; without <a href="api/forms/NgModel" class="code-anchor">NgModel</a></div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;input</span><span class="pln"> [</span><span class="atn">value</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"currentItem.name"</span><span class="pln">
       (</span><span class="atn">input</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"currentItem.name=$event.target.value"</span><span class="pln"> </span><span class="tag">&gt;</span><span class="pln">
without </span><a href="api/forms/NgModel" class="code-anchor"><span class="pln">NgModel</span></a></code>
    </pre></aio-code></code-example><p translation-result="on">上面的代码在把输入框的 <code>value</code> 属性绑定到 <code>name</code> 属性。 要监听对值的修改，代码绑定到输入框的 <code>input</code> 事件。 当用户造成更改时，<code>input</code> 事件被触发，并在包含了 DOM 事件对象 (<code>$event</code>) 的上下文中执行这条语句。</p><p translation-origin="off">This code sets the <code>&lt;input&gt;</code> <code>value</code> property by binding to the <code>name</code> property. To listen for changes to the value, the code binds to the <code>input</code> event of the <code>&lt;input&gt;</code> element. When the user makes changes, the <code>input</code> event is raised, and the binding executes the statement within a context that includes the DOM event object, <code>$event</code>.</p><p translation-result="on">要更新 <code>name</code> 属性，就要通过路径 <code>$event.target.value</code> 来获取更改后的值。</p><p translation-origin="off">To update the <code>name</code> property, the changed text is retrieved by following the path <code>$event.target.value</code>.</p><p translation-result="on">如果事件属于指令（回想一下，组件是指令的一种），那么 <code>$event</code> 具体是什么由指令决定。</p><p translation-origin="off">If the event belongs to a directive—recall that components are directives—<code>$event</code> has whatever shape the directive produces.</p><h3 id="custom-events-with-eventemitter" translation-result="on">使用 <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code> 实现自定义事件<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#custom-events-with-eventemitter"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="custom-events-with-eventemitter">Custom events with <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#custom-events-with-eventemitter"><i class="material-icons">link</i></a></h3><p translation-result="on">通常，指令使用 Angular <a href="api/core/EventEmitter">EventEmitter</a> 来触发自定义事件。 指令创建一个 <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code> 实例，并且把它作为属性暴露出来。 指令调用 <code>EventEmitter.emit(payload)</code> 来触发事件，可以传入任何东西作为消息载荷。 父指令通过绑定到这个属性来监听事件，并通过 <code>$event</code> 对象来访问载荷。</p><p translation-origin="off">Directives typically raise custom events with an Angular <a href="api/core/EventEmitter">EventEmitter</a>. The directive creates an <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code> and exposes it as a property. The directive calls <code>EventEmitter.emit(payload)</code> to fire an event, passing in a message payload, which can be anything. Parent directives listen for the event by binding to this property and accessing the payload through the <code>$event</code> object.</p><p translation-result="on">假设 <code>ItemDetailComponent</code> 用于显示英雄的信息，并响应用户的动作。 虽然 <code>ItemDetailComponent</code> 包含删除按钮，但它自己并不知道该如何删除这个英雄。 最好的做法是触发事件来报告“删除用户”的请求。</p><p translation-origin="off">Consider an <code>ItemDetailComponent</code> that presents item information and responds to user actions. Although the <code>ItemDetailComponent</code> has a delete button, it doesn't know how to delete the hero. It can only raise an event reporting the user's delete request.</p><p translation-result="on">下面的代码节选自 <code>ItemDetailComponent</code>：</p><p translation-origin="off">Here are the pertinent excerpts from that <code>ItemDetailComponent</code>:</p><code-example path="event-binding/src/app/item-detail/item-detail.component.html" header="src/app/item-detail/item-detail.component.html (template)" region="line-through" ng-version="9.0.0-rc.11"><div style="display:none">&lt;img src="{{itemImageUrl}}" [style.display]="displayNone"&gt; &lt;span [style.text-decoration]="lineThrough"&gt;{{ item.name }} &lt;/span&gt; &lt;button (click)="delete()"&gt;Delete&lt;/button&gt;</div><header class="ng-star-inserted">src/app/item-detail/item-detail.component.html (template)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/item-detail/item-detail.component.html (template)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"{{itemImageUrl}}"</span><span class="pln"> [</span><span class="atn">style</span><span class="pln">.</span><span class="atn">display</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"displayNone"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;span</span><span class="pln"> [</span><span class="atn">style</span><span class="pln">.</span><span class="atn">text-decoration</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"lineThrough"</span><span class="tag">&gt;</span><span class="pln">{{ item.name }}
</span><span class="tag">&lt;/span&gt;</span><span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"delete()"</span><span class="tag">&gt;</span><span class="pln">Delete</span><span class="tag">&lt;/button&gt;</span></code>
    </pre></aio-code></code-example><code-example path="event-binding/src/app/item-detail/item-detail.component.ts" header="src/app/item-detail/item-detail.component.ts (deleteRequest)" region="deleteRequest" ng-version="9.0.0-rc.11"><div style="display:none">// This component makes a request but it can't actually delete a hero. @<a href="api/core/Output" class="code-anchor">Output</a>() deleteRequest = new <a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a>&lt;Item&gt;(); delete() { this.deleteRequest.emit(this.item); this.displayNone = this.displayNone ? '' : 'none'; this.lineThrough = this.lineThrough ? '' : 'line-through'; }</div><header class="ng-star-inserted">src/app/item-detail/item-detail.component.ts (deleteRequest)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/item-detail/item-detail.component.ts (deleteRequest)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">// This component makes a request but it can't actually delete a hero.</span><span class="pln">
</span><span class="lit">@</span><a href="api/core/Output" class="code-anchor"><span class="lit">Output</span></a><span class="pun">()</span><span class="pln"> deleteRequest </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/core/EventEmitter" class="code-anchor"><span class="typ">EventEmitter</span></a><span class="pun">&lt;</span><span class="typ">Item</span><span class="pun">&gt;();</span><span class="pln">

</span><span class="kwd">delete</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">deleteRequest</span><span class="pun">.</span><span class="pln">emit</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">item</span><span class="pun">);</span><span class="pln">
  </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">displayNone </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">displayNone </span><span class="pun">?</span><span class="pln"> </span><span class="str">''</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln">
  </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">lineThrough </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">lineThrough </span><span class="pun">?</span><span class="pln"> </span><span class="str">''</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">'line-through'</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">组件定义了 <code>deleteRequest</code> 属性，它是 <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code> 实例。 当用户点击<em>删除</em>时，组件会调用 <code>delete()</code> 方法，让 <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code> 发出一个 <code>Item</code> 对象。</p><p translation-origin="off">The component defines a <code>deleteRequest</code> property that returns an <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code>. When the user clicks <em>delete</em>, the component invokes the <code>delete()</code> method, telling the <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code> to emit an <code>Item</code> object.</p><p translation-result="on">现在，假设有个宿主的父组件，它绑定了 <code>ItemDetailComponent</code> 的 <code>deleteRequest</code> 事件。</p><p translation-origin="off">Now imagine a hosting parent component that binds to the <code>deleteRequest</code> event of the <code>ItemDetailComponent</code>.</p><code-example path="event-binding/src/app/app.component.html" header="src/app/app.component.html (event-binding-to-component)" region="event-binding-to-component" ng-version="9.0.0-rc.11"><div style="display:none">&lt;app-item-detail (deleteRequest)="deleteItem($event)" [<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>]="currentItem"&gt;&lt;/app-item-detail&gt;</div><header class="ng-star-inserted">src/app/app.component.html (event-binding-to-component)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html (event-binding-to-component)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;app-item-detail</span><span class="pln"> (</span><span class="atn">deleteRequest</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"deleteItem($event)"</span><span class="pln"> [</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atn">item</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"currentItem"</span><span class="tag">&gt;&lt;/app-item-detail&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">当 <code>deleteRequest</code> 事件触发时，Angular 调用父组件的 <code>deleteItem</code> 方法， 在 <code>$event</code> 变量中传入<em>要删除的英雄</em>（来自 <code>ItemDetail</code>）。</p><p translation-origin="off">When the <code>deleteRequest</code> event fires, Angular calls the parent component's <code>deleteItem()</code> method, passing the <em>item-to-delete</em> (emitted by <code>ItemDetail</code>) in the <code>$event</code> variable.</p><h3 id="template-statements-have-side-effects" translation-result="on">模板语句有副作用<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#template-statements-have-side-effects"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="template-statements-have-side-effects">Template statements have side effects<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#template-statements-have-side-effects"><i class="material-icons">link</i></a></h3><p translation-result="on">虽然<a href="guide/template-syntax#template-expressions">模板表达式</a>不应该有<a href="guide/template-syntax#avoid-side-effects">副作用</a>，但是模板语句通常会有。这里的 <code>deleteItem()</code> 方法就有一个副作用：它删除了一个条目。</p><p translation-origin="off">Though <a href="guide/template-syntax#template-expressions">template expressions</a> shouldn't have <a href="guide/template-syntax#avoid-side-effects">side effects</a>, template statements usually do. The <code>deleteItem()</code> method does have a side effect: it deletes an item.</p><p translation-result="on">删除这个英雄会更新模型，还可能触发其它修改，包括向远端服务器的查询和保存。 这些变更通过系统进行扩散，并最终显示到当前以及其它视图中。</p><p translation-origin="off">Deleting an item updates the model, and depending on your code, triggers other changes including queries and saving to a remote server. These changes propagate through the system and ultimately display in this and other views.</p><hr><a id="two-way"></a><h2 id="two-way-binding-" translation-result="on">双向绑定 <code>[(...)]</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#two-way-binding-"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="two-way-binding-">Two-way binding <code>[(...)]</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#two-way-binding-"><i class="material-icons">link</i></a></h2><p translation-result="on">双向绑定为您的应用程序提供了一种在组件类及其模板之间共享数据的方式。</p><p translation-origin="off">Two-way binding gives your app a way to share data between a component class and its template.</p><p translation-result="on">有关本节中语法和代码段的演示，请参见<live-example name="two-way-binding" ng-version="9.0.0-rc.11"><span style="display:none">双向绑定范例</span><span><span class="ng-star-inserted"><a target="_blank" title="双向绑定范例" href="generated/live-examples/two-way-binding/stackblitz.html">双向绑定范例</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/two-way-binding/two-way-binding.zip">下载范例</a></span></span></span></live-example>。</p><p translation-origin="off">For a demonstration of the syntax and code snippets in this section, see the<live-example name="two-way-binding" ng-version="9.0.0-rc.11"><span style="display:none">two-way binding example</span><span><span class="ng-star-inserted"><a target="_blank" title="two-way binding example" href="generated/live-examples/two-way-binding/stackblitz.html">two-way binding example</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/two-way-binding/two-way-binding.zip">下载范例</a></span></span></span></live-example>.</p><h3 id="basics-of-two-way-binding" translation-result="on">双向绑定的基础知识<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#basics-of-two-way-binding"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="basics-of-two-way-binding">Basics of two-way binding<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#basics-of-two-way-binding"><i class="material-icons">link</i></a></h3><p translation-result="on">双向绑定会做两件事：</p><p translation-origin="off">Two-way binding does two things:</p><ol><li><p translation-result="on">设置特定的元素属性。</p><p translation-origin="off">Sets a specific element property.</p></li><li><p translation-result="on">监听元素的变更事件。</p><p translation-origin="off">Listens for an element change event.</p></li></ol><p translation-result="on">Angular 为此提供了一种特殊<em>的双向数据绑定</em>语法 <code>[()]</code>。<code>[()]</code> 语法将属性绑定的括号 <code>[]</code> 与事件绑定的括号 <code>()</code> 组合在一起。</p><p translation-origin="off">Angular offers a special <em>two-way data binding</em> syntax for this purpose, <code>[()]</code>. The <code>[()]</code> syntax combines the brackets of property binding, <code>[]</code>, with the parentheses of event binding, <code>()</code>.</p><div class="callout is-important"><header translation-result="on">[( )] = 盒子里的香蕉</header><header translation-origin="off">[( )] = banana in a box</header><p translation-result="on">想象<em>盒子里的香蕉</em>来记住方括号套圆括号。</p><p translation-origin="off">Visualize a <em>banana in a box</em> to remember that the parentheses go <em>inside</em> the brackets.</p></div><p translation-result="on"><code>[()]</code> 语法很容易想明白：该元素具有名为 <code>x</code> 的可设置属性和名为 <code>xChange</code> 的相应事件。 <code>SizerComponent</code> 就是用的这种模式。它具有一个名为 <code>size</code> 的值属性和一个与之相伴的 <code>sizeChange</code> 事件：</p><p translation-origin="off">The <code>[()]</code> syntax is easy to demonstrate when the element has a settable property called <code>x</code> and a corresponding event named <code>xChange</code>. Here's a <code>SizerComponent</code> that fits this pattern. It has a <code>size</code> value property and a companion <code>sizeChange</code> event:</p><code-example path="two-way-binding/src/app/sizer/sizer.component.ts" header="src/app/sizer.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a>, <a href="api/core/Input" class="code-anchor">Input</a>, <a href="api/core/Output" class="code-anchor">Output</a>, <a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a> } from '@angular/core'; @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'app-sizer', <a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a>: './sizer.component.html', <a href="api/core/Component#styleUrls" class="code-anchor">styleUrls</a>: ['./sizer.component.css'] }) export class SizerComponent { @<a href="api/core/Input" class="code-anchor">Input</a>() size: number | string; @<a href="api/core/Output" class="code-anchor">Output</a>() sizeChange = new <a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a>&lt;number&gt;(); dec() { this.resize(-1); } inc() { this.resize(+1); } resize(delta: number) { this.size = Math.min(40, Math.max(8, +this.size + delta)); this.sizeChange.emit(this.size); } }</div><header class="ng-star-inserted">src/app/sizer.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/sizer.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/Input" class="code-anchor"><span class="typ">Input</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/Output" class="code-anchor"><span class="typ">Output</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/EventEmitter" class="code-anchor"><span class="typ">EventEmitter</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app-sizer'</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/Component#templateUrl" class="code-anchor"><span class="pln">templateUrl</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'./sizer.component.html'</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/Component#styleUrls" class="code-anchor"><span class="pln">styleUrls</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'./sizer.component.css'</span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">SizerComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">


  </span><span class="lit">@</span><a href="api/core/Input" class="code-anchor"><span class="lit">Input</span></a><span class="pun">()</span><span class="pln">  size</span><span class="pun">:</span><span class="pln"> number </span><span class="pun">|</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln">
  </span><span class="lit">@</span><a href="api/core/Output" class="code-anchor"><span class="lit">Output</span></a><span class="pun">()</span><span class="pln"> sizeChange </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/core/EventEmitter" class="code-anchor"><span class="typ">EventEmitter</span></a><span class="str">&lt;number&gt;</span><span class="pun">();</span><span class="pln">

  dec</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">resize</span><span class="pun">(-</span><span class="lit">1</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
  inc</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">resize</span><span class="pun">(+</span><span class="lit">1</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln">

  resize</span><span class="pun">(</span><span class="pln">delta</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">size </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">min</span><span class="pun">(</span><span class="lit">40</span><span class="pun">,</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">max</span><span class="pun">(</span><span class="lit">8</span><span class="pun">,</span><span class="pln"> </span><span class="pun">+</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">size </span><span class="pun">+</span><span class="pln"> delta</span><span class="pun">));</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">sizeChange</span><span class="pun">.</span><span class="pln">emit</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">size</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><code-example path="two-way-binding/src/app/sizer/sizer.component.html" header="src/app/sizer.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div&gt; &lt;button (click)="dec()" title="smaller"&gt;-&lt;/button&gt; &lt;button (click)="inc()" title="bigger"&gt;+&lt;/button&gt; &lt;label [style.font-size.px]="size"&gt;FontSize: {{size}}px&lt;/label&gt; &lt;/div&gt;</div><header class="ng-star-inserted">src/app/sizer.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/sizer.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"dec()"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"smaller"</span><span class="tag">&gt;</span><span class="pln">-</span><span class="tag">&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"inc()"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"bigger"</span><span class="tag">&gt;</span><span class="pln">+</span><span class="tag">&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> [</span><span class="atn">style</span><span class="pln">.</span><span class="atn">font-size</span><span class="pln">.</span><span class="atn">px</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"size"</span><span class="tag">&gt;</span><span class="pln">FontSize: {{size}}px</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on"><code>size</code> 的初始值来自属性绑定的输入值。单击按钮可在最小值/最大值范围内增大或减小 <code>size</code>，然后带上调整后的大小发出 <code>sizeChange</code> 事件。</p><p translation-origin="off">The initial <code>size</code> is an input value from a property binding. Clicking the buttons increases or decreases the <code>size</code>, within min/max value constraints, and then raises, or emits, the <code>sizeChange</code> event with the adjusted size.</p><p translation-result="on">下面的例子中，<code>AppComponent.fontSize</code> 被双向绑定到 <code>SizerComponent</code>：</p><p translation-origin="off">Here's an example in which the <code>AppComponent.fontSizePx</code> is two-way bound to the <code>SizerComponent</code>:</p><code-example path="two-way-binding/src/app/app.component.html" header="src/app/app.component.html (two-way-1)" region="two-way-1" ng-version="9.0.0-rc.11"><div style="display:none">&lt;app-sizer [(size)]="fontSizePx"&gt;&lt;/app-sizer&gt; &lt;div [style.font-size.px]="fontSizePx"&gt;Resizable Text&lt;/div&gt;</div><header class="ng-star-inserted">src/app/app.component.html (two-way-1)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html (two-way-1)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;app-sizer</span><span class="pln"> [(</span><span class="atn">size</span><span class="pln">)]</span><span class="pun">=</span><span class="atv">"fontSizePx"</span><span class="tag">&gt;&lt;/app-sizer&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> [</span><span class="atn">style</span><span class="pln">.</span><span class="atn">font-size</span><span class="pln">.</span><span class="atn">px</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"fontSizePx"</span><span class="tag">&gt;</span><span class="pln">Resizable Text</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on"><code>AppComponent.fontSizePx</code> 建立初始 <code>SizerComponent.size</code> 值。</p><p translation-origin="off">The <code>AppComponent.fontSizePx</code> establishes the initial <code>SizerComponent.size</code> value.</p><code-example path="two-way-binding/src/app/app.component.ts" header="src/app/app.component.ts" region="font-size" ng-version="9.0.0-rc.11"><div style="display:none">fontSizePx = 16;</div><header class="ng-star-inserted">src/app/app.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">fontSizePx </span><span class="pun">=</span><span class="pln"> </span><span class="lit">16</span><span class="pun">;</span></code>
    </pre></aio-code></code-example><p translation-result="on">单击按钮就会通过双向绑定更新 <code>AppComponent.fontSizePx</code>。修改后的 <code>AppComponent.fontSizePx</code> 值将传递到<em>样式</em>绑定，从而使显示的文本更大或更小。</p><p translation-origin="off">Clicking the buttons updates the <code>AppComponent.fontSizePx</code> via the two-way binding. The revised <code>AppComponent.fontSizePx</code> value flows through to the <em>style</em> binding, making the displayed text bigger or smaller.</p><p translation-result="on">双向绑定语法实际上是<em>属性</em>绑定和<em>事件绑定</em>的语法糖。 Angular 将 <code>SizerComponent</code> 的绑定分解成这样：</p><p translation-origin="off">The two-way binding syntax is really just syntactic sugar for a <em>property</em> binding and an <em>event</em> binding. Angular desugars the <code>SizerComponent</code> binding into this:</p><code-example path="two-way-binding/src/app/app.component.html" header="src/app/app.component.html (two-way-2)" region="two-way-2" ng-version="9.0.0-rc.11"><div style="display:none">&lt;app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"&gt;&lt;/app-sizer&gt;</div><header class="ng-star-inserted">src/app/app.component.html (two-way-2)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html (two-way-2)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;app-sizer</span><span class="pln"> [</span><span class="atn">size</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"fontSizePx"</span><span class="pln"> (</span><span class="atn">sizeChange</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"fontSizePx=$event"</span><span class="tag">&gt;&lt;/app-sizer&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on"><code>$event</code> 变量包含了 <code>SizerComponent.sizeChange</code> 事件的荷载。 当用户点击按钮时，Angular 将 <code>$event</code> 赋值给 <code>AppComponent.fontSizePx</code>。</p><p translation-origin="off">The <code>$event</code> variable contains the payload of the <code>SizerComponent.sizeChange</code> event. Angular assigns the <code>$event</code> value to the <code>AppComponent.fontSizePx</code> when the user clicks the buttons.</p><h3 id="two-way-binding-in-forms" translation-result="on">表单中的双向绑定<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#two-way-binding-in-forms"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="two-way-binding-in-forms">Two-way binding in forms<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#two-way-binding-in-forms"><i class="material-icons">link</i></a></h3><p translation-result="on">与单独的属性绑定和事件绑定相比，双向绑定语法非常方便。将双向绑定与 HTML 表单元素（例如 <code>&lt;input&gt;</code> 和 <code>&lt;select&gt;</code>）一起使用会很方便。但是，没有哪个原生 HTML 元素会遵循 <code>x</code> 值和 <code>xChange</code> 事件的命名模式。</p><p translation-origin="off">The two-way binding syntax is a great convenience compared to separate property and event bindings. It would be convenient to use two-way binding with HTML form elements like <code>&lt;input&gt;</code> and <code>&lt;select&gt;</code>. However, no native HTML element follows the <code>x</code> value and <code>xChange</code> event pattern.</p><p translation-result="on">要了解如何在表单中使用双向绑定的更多信息，请参见 Angular <a href="guide/template-syntax#ngModel">NgModel</a> 。</p><p translation-origin="off">For more on how to use two-way binding in forms, see Angular <a href="guide/template-syntax#ngModel">NgModel</a>.</p><hr><a id="directives"></a><h2 id="built-in-directives" translation-result="on">内置指令<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#built-in-directives"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="built-in-directives">Built-in directives<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#built-in-directives"><i class="material-icons">link</i></a></h2><p translation-result="on">Angular 提供了两种内置指令：属性型指令和结构型指令。本节会回顾一些最常见的内置指令，分为<a href="guide/template-syntax#attribute-directives"><em>属性型</em>指令</a>或<a href="guide/template-syntax#structural-directives"><em>结构型</em>指令，</a>并有相应的<live-example name="built-in-directives" ng-version="9.0.0-rc.11"><span style="display:none">内置指令示例</span><span><span class="ng-star-inserted"><a target="_blank" title="内置指令示例" href="generated/live-examples/built-in-directives/stackblitz.html">内置指令示例</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/built-in-directives/built-in-directives.zip">下载范例</a></span></span></span></live-example>。</p><p translation-origin="off">Angular offers two kinds of built-in directives: attribute directives and structural directives. This segment reviews some of the most common built-in directives, classified as either <a href="guide/template-syntax#attribute-directives"><em>attribute</em> directives</a> or <a href="guide/template-syntax#structural-directives"><em>structural</em> directives</a> and has its own<live-example name="built-in-directives" ng-version="9.0.0-rc.11"><span style="display:none">built-in directives example</span><span><span class="ng-star-inserted"><a target="_blank" title="built-in directives example" href="generated/live-examples/built-in-directives/stackblitz.html">built-in directives example</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/built-in-directives/built-in-directives.zip">下载范例</a></span></span></span></live-example>.</p><p translation-result="on">欲知详情，包括如何构建您自己的自定义指令，请参阅<a href="guide/attribute-directives">属性型指令</a>和<a href="guide/structural-directives">结构型指令</a> 。</p><p translation-origin="off">For more detail, including how to build your own custom directives, see <a href="guide/attribute-directives">Attribute Directives</a> and <a href="guide/structural-directives">Structural Directives</a>.</p><hr><a id="attribute-directives"></a><h3 id="built-in-attribute-directives" translation-result="on">内置属性型指令<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#built-in-attribute-directives"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="built-in-attribute-directives">Built-in attribute directives<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#built-in-attribute-directives"><i class="material-icons">link</i></a></h3><p translation-result="on">属性型指令会监听并修改其他 HTML 元素和组件的行为、Attribute 和 Property。 它们通常被应用在元素上，就好像它们是 HTML 属性一样，因此得名属性型指令。</p><p translation-origin="off">Attribute directives listen to and modify the behavior of other HTML elements, attributes, properties, and components. You usually apply them to elements as if they were HTML attributes, hence the name.</p><p translation-result="on">许多 NgModule（例如 <a href="guide/router" title="路由和导航"><code>RouterModule</code></a>和 <a href="guide/forms" title="表单"><code>FormsModule</code></a>都定义了自己的属性型指令。最常见的属性型指令如下：</p><p translation-origin="off">Many NgModules such as the <a href="guide/router" title="Routing and Navigation"><code>RouterModule</code></a>and the <a href="guide/forms" title="Forms"><code>FormsModule</code></a>define their own attribute directives. The most common attribute directives are as follows:</p><ul><li><p translation-result="on"><a href="guide/template-syntax#ngClass"><code>NgClass</code></a>—— 添加和删除一组 CSS 类。</p><p translation-origin="off"><a href="guide/template-syntax#ngClass"><code>NgClass</code></a>—adds and removes a set of CSS classes.</p></li><li><p translation-result="on"><a href="guide/template-syntax#ngStyle"><code>NgStyle</code></a>—— 添加和删除一组 HTML 样式。</p><p translation-origin="off"><a href="guide/template-syntax#ngStyle"><code>NgStyle</code></a>—adds and removes a set of HTML styles.</p></li><li><p translation-result="on"><a href="guide/template-syntax#ngModel"><code>NgModel</code></a>—— 将数据双向绑定添加到 HTML 表单元素。</p><p translation-origin="off"><a href="guide/template-syntax#ngModel"><code>NgModel</code></a>—adds two-way data binding to an HTML form element.</p></li></ul><hr><a id="ngClass"></a><h3 id="ngclass"><code><a href="api/common/NgClass" class="code-anchor">NgClass</a></code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#ngclass"><i class="material-icons">link</i></a></h3><p translation-result="on">用 <code><a href="api/common/NgClass" class="code-anchor">ngClass</a></code> 同时添加或删除几个 CSS 类。</p><p translation-origin="off">Add or remove several CSS classes simultaneously with <code><a href="api/common/NgClass" class="code-anchor">ngClass</a></code>.</p><code-example path="built-in-directives/src/app/app.component.html" region="special-div" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;!-- toggle the "special" class on/off with a property --&gt; &lt;div [<a href="api/common/NgClass" class="code-anchor">ngClass</a>]="isSpecial ? 'special' : ''"&gt;This div is special&lt;/div&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">&lt;!-- toggle the "special" class on/off with a property --&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> [</span><a href="api/common/NgClass" class="code-anchor"><span class="atn">ngClass</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"isSpecial ? 'special' : ''"</span><span class="tag">&gt;</span><span class="pln">This div is special</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p translation-result="on">要添加或删除<em>单个</em>类，请使用<a href="guide/template-syntax#class-binding">类绑定</a>而不是 <code><a href="api/common/NgClass" class="code-anchor">NgClass</a></code> 。</p><p translation-origin="off">To add or remove a <em>single</em> class, use <a href="guide/template-syntax#class-binding">class binding</a> rather than <code><a href="api/common/NgClass" class="code-anchor">NgClass</a></code>.</p></div><p translation-result="on">考虑一个 <code>setCurrentClasses()</code> 组件方法，该方法设置一个组件属性 <code>currentClasses</code>，该对象具有一个根据其他三个组件属性的 <code>true</code> / <code>false</code> 状态来添加或删除三个 CSS 类的对象。该对象的每个键(key)都是一个 CSS 类名。如果要添加上该类，则其值为 <code>true</code>，反之则为 <code>false</code> 。</p><p translation-origin="off">Consider a <code>setCurrentClasses()</code> component method that sets a component property, <code>currentClasses</code>, with an object that adds or removes three classes based on the <code>true</code>/<code>false</code> state of three other component properties. Each key of the object is a CSS class name; its value is <code>true</code> if the class should be added, <code>false</code> if it should be removed.</p><code-example path="built-in-directives/src/app/app.component.ts" region="setClasses" header="src/app/app.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">currentClasses: {}; setCurrentClasses() { // CSS classes: added/removed per current <a href="api/animations/state" class="code-anchor">state</a> of component <a href="api/core/DebugElement#properties" class="code-anchor">properties</a> this.currentClasses = { 'saveable': this.canSave, 'modified': !this.isUnchanged, 'special': this.isSpecial }; }</div><header class="ng-star-inserted">src/app/app.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">currentClasses</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{};</span><span class="pln">
setCurrentClasses</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="com">// CSS classes: added/removed per current </span><a href="api/animations/state" class="code-anchor"><span class="com">state</span></a><span class="com"> of component </span><a href="api/core/DebugElement#properties" class="code-anchor"><span class="com">properties</span></a><span class="pln">
  </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">currentClasses </span><span class="pun">=</span><span class="pln">  </span><span class="pun">{</span><span class="pln">
    </span><span class="str">'saveable'</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">canSave</span><span class="pun">,</span><span class="pln">
    </span><span class="str">'modified'</span><span class="pun">:</span><span class="pln"> </span><span class="pun">!</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">isUnchanged</span><span class="pun">,</span><span class="pln">
    </span><span class="str">'special'</span><span class="pun">:</span><span class="pln">  </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">isSpecial
  </span><span class="pun">};</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">把 <code><a href="api/common/NgClass" class="code-anchor">NgClass</a></code> 属性绑定到 <code>currentClasses</code>，根据它来设置此元素的 CSS 类：</p><p translation-origin="off">Adding an <code><a href="api/common/NgClass" class="code-anchor">ngClass</a></code> property binding to <code>currentClasses</code> sets the element's classes accordingly:</p><code-example path="built-in-directives/src/app/app.component.html" region="NgClass-1" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div [<a href="api/common/NgClass" class="code-anchor">ngClass</a>]="currentClasses"&gt;This div is initially saveable, unchanged, and special.&lt;/div&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> [</span><a href="api/common/NgClass" class="code-anchor"><span class="atn">ngClass</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"currentClasses"</span><span class="tag">&gt;</span><span class="pln">This div is initially saveable, unchanged, and special.</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p translation-result="on">请记住，在这种情况下，您要在初始化时和它依赖的属性发生变化时调用 <code>setCurrentClasses()</code> 。</p><p translation-origin="off">Remember that in this situation you'd call <code>setCurrentClasses()</code>, both initially and when the dependent properties change.</p></div><hr><a id="ngStyle"></a><h3 id="ngstyle"><code><a href="api/common/NgStyle" class="code-anchor">NgStyle</a></code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#ngstyle"><i class="material-icons">link</i></a></h3><p translation-result="on">使用 <code><a href="api/common/NgStyle" class="code-anchor">NgStyle</a></code> 根据组件的状态同时动态设置多个内联样式。</p><p translation-origin="off">Use <code><a href="api/common/NgStyle" class="code-anchor">NgStyle</a></code> to set many inline styles simultaneously and dynamically, based on the state of the component.</p><h4 id="without-ngstyle" translation-result="on">不用 <code><a href="api/common/NgStyle" class="code-anchor">NgStyle</a></code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#without-ngstyle"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="without-ngstyle">Without <code><a href="api/common/NgStyle" class="code-anchor">NgStyle</a></code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#without-ngstyle"><i class="material-icons">link</i></a></h4><p translation-result="on">有些情况下，要考虑使用<a href="guide/template-syntax#style-binding">样式绑定</a>来设置<em>单个</em>样式值，而不使用 <code><a href="api/common/NgStyle" class="code-anchor">NgStyle</a></code> 。</p><p translation-origin="off">For context, consider setting a <em>single</em> style value with <a href="guide/template-syntax#style-binding">style binding</a>, without <code><a href="api/common/NgStyle" class="code-anchor">NgStyle</a></code>.</p><code-example path="built-in-directives/src/app/app.component.html" region="without-ng-style" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div [style.font-size]="isSpecial ? 'x-large' : 'smaller'"&gt; This div is x-large or smaller. &lt;/div&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> [</span><span class="atn">style</span><span class="pln">.</span><span class="atn">font-size</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"isSpecial ? 'x-large' : 'smaller'"</span><span class="tag">&gt;</span><span class="pln">
  This div is x-large or smaller.
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">但是，如果要同时设置<em>多个</em>内联样式，请使用 <code><a href="api/common/NgStyle" class="code-anchor">NgStyle</a></code> 指令。</p><p translation-origin="off">However, to set <em>many</em> inline styles at the same time, use the <code><a href="api/common/NgStyle" class="code-anchor">NgStyle</a></code> directive.</p><p translation-result="on">下面的例子是一个 <code>setCurrentStyles()</code> 方法，它基于该组件另外三个属性的状态，用一个定义了三个样式的对象设置了 <code>currentStyles</code> 属性。</p><p translation-origin="off">The following is a <code>setCurrentStyles()</code> method that sets a component property, <code>currentStyles</code>, with an object that defines three styles, based on the state of three other component properties:</p><code-example path="built-in-directives/src/app/app.component.ts" region="setStyles" header="src/app/app.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">currentStyles: {}; setCurrentStyles() { // CSS styles: set per current <a href="api/animations/state" class="code-anchor">state</a> of component <a href="api/core/DebugElement#properties" class="code-anchor">properties</a> this.currentStyles = { 'font-style': this.canSave ? 'italic' : 'normal', 'font-weight': !this.isUnchanged ? 'bold' : 'normal', 'font-size': this.isSpecial ? '24px' : '12px' }; }</div><header class="ng-star-inserted">src/app/app.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">currentStyles</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{};</span><span class="pln">
setCurrentStyles</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="com">// CSS styles: set per current </span><a href="api/animations/state" class="code-anchor"><span class="com">state</span></a><span class="com"> of component </span><a href="api/core/DebugElement#properties" class="code-anchor"><span class="com">properties</span></a><span class="pln">
  </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">currentStyles </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="str">'font-style'</span><span class="pun">:</span><span class="pln">  </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">canSave      </span><span class="pun">?</span><span class="pln"> </span><span class="str">'italic'</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">'normal'</span><span class="pun">,</span><span class="pln">
    </span><span class="str">'font-weight'</span><span class="pun">:</span><span class="pln"> </span><span class="pun">!</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">isUnchanged </span><span class="pun">?</span><span class="pln"> </span><span class="str">'bold'</span><span class="pln">   </span><span class="pun">:</span><span class="pln"> </span><span class="str">'normal'</span><span class="pun">,</span><span class="pln">
    </span><span class="str">'font-size'</span><span class="pun">:</span><span class="pln">   </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">isSpecial    </span><span class="pun">?</span><span class="pln"> </span><span class="str">'24px'</span><span class="pln">   </span><span class="pun">:</span><span class="pln"> </span><span class="str">'12px'</span><span class="pln">
  </span><span class="pun">};</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">把 <code><a href="api/common/NgStyle" class="code-anchor">ngStyle</a></code> 属性绑定到 <code>currentStyles</code>，来根据它设置此元素的样式：</p><p translation-origin="off">Adding an <code><a href="api/common/NgStyle" class="code-anchor">ngStyle</a></code> property binding to <code>currentStyles</code> sets the element's styles accordingly:</p><code-example path="built-in-directives/src/app/app.component.html" region="NgStyle-2" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div [<a href="api/common/NgStyle" class="code-anchor">ngStyle</a>]="currentStyles"&gt; This div is initially italic, normal weight, and extra large (24px). &lt;/div&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> [</span><a href="api/common/NgStyle" class="code-anchor"><span class="atn">ngStyle</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"currentStyles"</span><span class="tag">&gt;</span><span class="pln">
  This div is initially italic, normal weight, and extra large (24px).
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p translation-result="on">请记住，无论是在初始时还是其依赖的属性发生变化时，都要调用 <code>setCurrentStyles()</code> 。</p><p translation-origin="off">Remember to call <code>setCurrentStyles()</code>, both initially and when the dependent properties change.</p></div><hr><a id="ngModel"></a><h3 id="ngmodel-two-way-binding" translation-result="on"><code>[(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]</code> ：双向绑定<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#ngmodel-two-way-binding"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="ngmodel-two-way-binding"><code>[(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]</code>: Two-way binding<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#ngmodel-two-way-binding"><i class="material-icons">link</i></a></h3><p translation-result="on"><code><a href="api/forms/NgModel" class="code-anchor">NgModel</a></code> 指令允许您显示数据属性并在用户进行更改时更新该属性。这是一个例子：</p><p translation-origin="off">The <code><a href="api/forms/NgModel" class="code-anchor">NgModel</a></code> directive allows you to display a data property and update that property when the user makes changes. Here's an example:</p><code-example path="built-in-directives/src/app/app.component.html" header="src/app/app.component.html (NgModel example)" region="NgModel-1" ng-version="9.0.0-rc.11"><div style="display:none">&lt;label for="example-ngModel"&gt;[(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]:&lt;/label&gt; &lt;input [(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]="currentItem.name" id="example-ngModel"&gt;</div><header class="ng-star-inserted">src/app/app.component.html (NgModel example)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html (NgModel example)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"example-ngModel"</span><span class="tag">&gt;</span><span class="pln">[(</span><a href="api/forms/NgModel" class="code-anchor"><span class="pln">ngModel</span></a><span class="pln">)]:</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;input</span><span class="pln"> [(</span><a href="api/forms/NgModel" class="code-anchor"><span class="atn">ngModel</span></a><span class="pln">)]</span><span class="pun">=</span><span class="atv">"currentItem.name"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"example-ngModel"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><h4 id="import-formsmodule-to-use-ngmodel" translation-result="on">导入 <code><a href="api/forms/FormsModule" class="code-anchor">FormsModule</a></code> 以使用 <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#import-formsmodule-to-use-ngmodel"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="import-formsmodule-to-use-ngmodel">Import <code><a href="api/forms/FormsModule" class="code-anchor">FormsModule</a></code> to use <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#import-formsmodule-to-use-ngmodel"><i class="material-icons">link</i></a></h4><p translation-result="on">要想在双向数据绑定中使用 <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code> 指令，必须先导入 <code><a href="api/forms/FormsModule" class="code-anchor">FormsModule</a></code> 并将其添加到 NgModule 的 <code>imports</code> 列表中。要了解关于 <code><a href="api/forms/FormsModule" class="code-anchor">FormsModule</a></code> 和 <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code> 的更多信息，参见<a href="guide/forms#ngModel">表单</a>一章。</p><p translation-origin="off">Before using the <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code> directive in a two-way data binding, you must import the <code><a href="api/forms/FormsModule" class="code-anchor">FormsModule</a></code> and add it to the NgModule's <code>imports</code> list. Learn more about the <code><a href="api/forms/FormsModule" class="code-anchor">FormsModule</a></code> and <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code> in <a href="guide/forms#ngModel">Forms</a>.</p><p translation-result="on">记住，要导入 <code><a href="api/forms/FormsModule" class="code-anchor">FormsModule</a></code> 才能让 <code>[(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]</code> 可用，如下所示：</p><p translation-origin="off">Remember to import the <code><a href="api/forms/FormsModule" class="code-anchor">FormsModule</a></code> to make <code>[(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]</code> available as follows:</p><code-example path="built-in-directives/src/app/app.module.ts" header="src/app/app.module.ts (FormsModule import)" region="import-forms-module" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/forms/FormsModule" class="code-anchor">FormsModule</a> } from '@angular/forms'; // &lt;--- JavaScript import from Angular /* . . . */ @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ /* . . . */ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/forms/FormsModule" class="code-anchor">FormsModule</a> // &lt;--- import into the <a href="api/core/NgModule" class="code-anchor">NgModule</a> ], /* . . . */ }) export class AppModule { }</div><header class="ng-star-inserted">src/app/app.module.ts (FormsModule import)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.module.ts (FormsModule import)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/forms/FormsModule" class="code-anchor"><span class="typ">FormsModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/forms'</span><span class="pun">;</span><span class="pln"> </span><span class="com">// &lt;--- JavaScript import from Angular</span><span class="pln">
</span><span class="com">/* . . . */</span><span class="pln">
</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
</span><span class="com">/* . . . */</span><span class="pln">

  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/forms/FormsModule" class="code-anchor"><span class="typ">FormsModule</span></a><span class="pln"> </span><span class="com">// &lt;--- import into the </span><a href="api/core/NgModule" class="code-anchor"><span class="com">NgModule</span></a><span class="pln">
  </span><span class="pun">],</span><span class="pln">
</span><span class="com">/* . . . */</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">通过分别绑定到 <code>&lt;input&gt;</code> 元素的 <code>value</code> 属性和 <code>input</code> 事件，可以达到同样的效果：</p><p translation-origin="off">You could achieve the same result with separate bindings to the <code>&lt;input&gt;</code> element's <code>value</code> property and <code>input</code> event:</p><code-example path="built-in-directives/src/app/app.component.html" region="without-NgModel" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;label for="without"&gt;without <a href="api/forms/NgModel" class="code-anchor">NgModel</a>:&lt;/label&gt; &lt;input [value]="currentItem.name" (input)="currentItem.name=$event.target.value" id="without"&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"without"</span><span class="tag">&gt;</span><span class="pln">without </span><a href="api/forms/NgModel" class="code-anchor"><span class="pln">NgModel</span></a><span class="pln">:</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;input</span><span class="pln"> [</span><span class="atn">value</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"currentItem.name"</span><span class="pln"> (</span><span class="atn">input</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"currentItem.name=$event.target.value"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"without"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">为了简化语法， <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code> 指令把技术细节隐藏在其输入属性 <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code> 和输出属性 <code>ngModelChange</code> 的后面：</p><p translation-origin="off">To streamline the syntax, the <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code> directive hides the details behind its own <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code> input and <code>ngModelChange</code> output properties:</p><code-example path="built-in-directives/src/app/app.component.html" region="NgModelChange" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;label for="example-change"&gt;(ngModelChange)="...name=$event":&lt;/label&gt; &lt;input [<a href="api/forms/NgModel" class="code-anchor">ngModel</a>]="currentItem.name" (ngModelChange)="currentItem.name=$event" id="example-change"&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"example-change"</span><span class="tag">&gt;</span><span class="pln">(ngModelChange)="...name=$event":</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;input</span><span class="pln"> [</span><a href="api/forms/NgModel" class="code-anchor"><span class="atn">ngModel</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"currentItem.name"</span><span class="pln"> (</span><span class="atn">ngModelChange</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"currentItem.name=$event"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"example-change"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on"><code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code> 输入属性会设置该元素的值，并通过 <code>ngModelChange</code> 的输出属性来监听元素值的变化。</p><p translation-origin="off">The <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code> data property sets the element's value property and the <code>ngModelChange</code> event property listens for changes to the element's value.</p><h4 id="ngmodel-and-value-accessors" translation-result="on"><code><a href="api/forms/NgModel" class="code-anchor">NgModel</a></code> 和值访问器<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#ngmodel-and-value-accessors"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="ngmodel-and-value-accessors"><code><a href="api/forms/NgModel" class="code-anchor">NgModel</a></code> and value accessors<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#ngmodel-and-value-accessors"><i class="material-icons">link</i></a></h4><p translation-result="on">这些技术细节是针对每种具体元素的，因此 <code><a href="api/forms/NgModel" class="code-anchor">NgModel</a></code> 指令仅适用于通过 <a href="api/forms/ControlValueAccessor">ControlValueAccessor</a> 适配过这种协议的元素。 Angular 已经为所有基本的 HTML 表单元素提供了<em>值访问器</em>，<a href="guide/forms">表单</a>一章示范了如何绑定到它们。</p><p translation-origin="off">The details are specific to each kind of element and therefore the <code><a href="api/forms/NgModel" class="code-anchor">NgModel</a></code> directive only works for an element supported by a <a href="api/forms/ControlValueAccessor">ControlValueAccessor</a> that adapts an element to this protocol. Angular provides <em>value accessors</em> for all of the basic HTML form elements and the <a href="guide/forms">Forms</a> guide shows how to bind to them.</p><p translation-result="on">在编写适当的值访问器之前，不能将 <code>[(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]</code> 应用于非表单的原生元素或第三方自定义组件。欲知详情，参见<a href="https://angular.io/api/forms/DefaultValueAccessor">DefaultValueAccessor</a>上的 API 文档。</p><p translation-origin="off">You can't apply <code>[(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]</code> to a non-form native element or a third-party custom component until you write a suitable value accessor. For more information, see the API documentation on <a href="https://angular.io/api/forms/DefaultValueAccessor">DefaultValueAccessor</a>.</p><p translation-result="on">您不一定非用为所编写的 Angular 组件提供值访问器，因为您还可以把值属性和事件属性命名为符合 Angular 的基本<a href="guide/template-syntax#two-way">双向绑定语法</a>的形式，并完全跳过 <code><a href="api/forms/NgModel" class="code-anchor">NgModel</a></code>。<a href="guide/template-syntax#two-way">双向绑定</a>部分的 <code>sizer</code> 是此技术的一个示例。</p><p translation-origin="off">You don't need a value accessor for an Angular component that you write because you can name the value and event properties to suit Angular's basic <a href="guide/template-syntax#two-way">two-way binding syntax</a> and skip <code><a href="api/forms/NgModel" class="code-anchor">NgModel</a></code> altogether. The <code>sizer</code> in the <a href="guide/template-syntax#two-way">Two-way Binding</a> section is an example of this technique.</p><p translation-result="on">单独的 <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code> 绑定是对绑定到元素的原生属性方式的一种改进，但您可以使用 <code>[(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]</code> 语法来通过单个声明简化绑定：</p><p translation-origin="off">Separate <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code> bindings are an improvement over binding to the element's native properties, but you can streamline the binding with a single declaration using the <code>[(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]</code> syntax:</p><code-example path="built-in-directives/src/app/app.component.html" region="NgModel-1" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;label for="example-ngModel"&gt;[(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]:&lt;/label&gt; &lt;input [(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]="currentItem.name" id="example-ngModel"&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"example-ngModel"</span><span class="tag">&gt;</span><span class="pln">[(</span><a href="api/forms/NgModel" class="code-anchor"><span class="pln">ngModel</span></a><span class="pln">)]:</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;input</span><span class="pln"> [(</span><a href="api/forms/NgModel" class="code-anchor"><span class="atn">ngModel</span></a><span class="pln">)]</span><span class="pun">=</span><span class="atv">"currentItem.name"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"example-ngModel"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">此 <code>[(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]</code> 语法只能<em>设置</em>数据绑定属性。如果您要做得更多，可以编写扩展表单。例如，下面的代码将 <code>&lt;input&gt;</code> 值更改为大写：</p><p translation-origin="off">This <code>[(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]</code> syntax can only <em>set</em> a data-bound property. If you need to do something more, you can write the expanded form; for example, the following changes the <code>&lt;input&gt;</code> value to uppercase:</p><code-example path="built-in-directives/src/app/app.component.html" region="uppercase" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;input [<a href="api/forms/NgModel" class="code-anchor">ngModel</a>]="currentItem.name" (ngModelChange)="setUppercaseName($event)" id="example-uppercase"&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;input</span><span class="pln"> [</span><a href="api/forms/NgModel" class="code-anchor"><span class="atn">ngModel</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"currentItem.name"</span><span class="pln"> (</span><span class="atn">ngModelChange</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"setUppercaseName($event)"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"example-uppercase"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">这里是所有这些变体的动画，包括这个大写转换的版本：</p><p translation-origin="off">Here are all variations in action, including the uppercase version:</p><div class="lightbox"><img src="generated/images/guide/built-in-directives/ng-model-anim.gif" alt="NgModel variations" width="540" height="264"></div><hr><a id="structural-directives"></a><h2 id="built-in-structural-directives" translation-result="on">内置<em>结构型</em>指令<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#built-in-structural-directives"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="built-in-structural-directives">Built-in <em>structural</em> directives<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#built-in-structural-directives"><i class="material-icons">link</i></a></h2><p translation-result="on">结构型指令的职责是 HTML 布局。 它们塑造或重塑 DOM 的<em>结构</em>，这通常是通过添加、移除和操纵它们所附加到的宿主元素来实现的。</p><p translation-origin="off">Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, and manipulating the host elements to which they are attached.</p><p translation-result="on">本节会介绍常见的内置结构型指令：</p><p translation-origin="off">This section is an introduction to the common built-in structural directives:</p><ul><li><p translation-result="on"><a href="guide/template-syntax#ngIf"><code>NgIf</code></a>—— 从模板中创建或销毁子视图。</p><p translation-origin="off"><a href="guide/template-syntax#ngIf"><code>NgIf</code></a>—conditionally creates or destroys subviews from the template.</p></li><li><p translation-result="on"><a href="guide/template-syntax#ngFor"><code>NgFor</code></a>—— 为列表中的每个条目重复渲染一个节点。</p><p translation-origin="off"><a href="guide/template-syntax#ngFor"><code>NgFor</code></a>—repeat a node for each item in a list.</p></li><li><p translation-result="on"><a href="guide/template-syntax#ngSwitch"><code>NgSwitch</code></a>—— 一组在备用视图之间切换的指令。</p><p translation-origin="off"><a href="guide/template-syntax#ngSwitch"><code>NgSwitch</code></a>—a set of directives that switch among alternative views.</p></li></ul><div class="alert is-helpful"><p translation-result="on"><a href="guide/structural-directives">结构型指令</a>一章涵盖了结构型指令的详细内容，它解释了以下内容：</p><p translation-origin="off">The deep details of structural directives are covered in the <a href="guide/structural-directives">Structural Directives</a> guide, which explains the following:</p><ul><li><p translation-result="on">为什么<a href="guide/structural-directives#the-asterisk--prefix">在要指令名称前加上星号（*）</a> 。</p><p translation-origin="off">Why you <a href="guide/structural-directives#the-asterisk--prefix">prefix the directive name with an asterisk (*)</a>.</p></li><li><p translation-result="on">当指令没有合适的宿主元素时，使用 <a href="guide/structural-directives#ngcontainer" title="<ng-container>"><code>&lt;ng-container&gt;</code></a>对元素进行分组。</p><p translation-origin="off">Using <a href="guide/structural-directives#ngcontainer" title="<ng-container>"><code>&lt;ng-container&gt;</code></a>to group elements when there is no suitable host element for the directive.</p></li><li><p translation-result="on">如何写自己的结构型指令。</p><p translation-origin="off">How to write your own structural directive.</p></li><li><p translation-result="on">你只能往一个元素上应用<a href="guide/structural-directives#one-per-element" title="one per host element">一个结构型指令</a>。</p><p translation-origin="off">That you can only apply <a href="guide/structural-directives#one-per-element" title="one per host element">one structural directive</a> to an element.</p></li></ul></div><hr><a id="ngIf"></a><h3 id="ngif">NgIf<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#ngif"><i class="material-icons">link</i></a></h3><p translation-result="on">您可以通过将 <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> 指令应用在宿主元素上来从 DOM 中添加或删除元素。在此示例中，将指令绑定到了条件表达式，例如 <code><a href="api/router/RouterLinkActive#isActive" class="code-anchor">isActive</a></code> 。</p><p translation-origin="off">You can add or remove an element from the DOM by applying an <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> directive to a host element. Bind the directive to a condition expression like <code><a href="api/router/RouterLinkActive#isActive" class="code-anchor">isActive</a></code> in this example.</p><code-example path="built-in-directives/src/app/app.component.html" region="NgIf-1" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;app-item-detail *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="<a href="api/router/RouterLinkActive#isActive" class="code-anchor">isActive</a>" [<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>]="<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>"&gt;&lt;/app-item-detail&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;app-item-detail</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"</span><a href="api/router/RouterLinkActive#isActive" class="code-anchor"><span class="atv">isActive</span></a><span class="atv">"</span><span class="pln"> [</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atn">item</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atv">item</span></a><span class="atv">"</span><span class="tag">&gt;&lt;/app-item-detail&gt;</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p translation-result="on">不要忘了 <code><a href="api/common/NgIf" class="code-anchor">ngIf</a></code> 前面的星号（<code>*</code>）。有关星号的更多信息，请参见 <a href="guide/structural-directives">结构型指令</a>中的<a href="guide/structural-directives#the-asterisk--prefix">星号（*）前缀</a>部分。</p><p translation-origin="off">Don't forget the asterisk (<code>*</code>) in front of <code><a href="api/common/NgIf" class="code-anchor">ngIf</a></code>. For more information on the asterisk, see the <a href="guide/structural-directives#the-asterisk--prefix">asterisk (*) prefix</a> section of <a href="guide/structural-directives">Structural Directives</a>.</p></div><p translation-result="on">当 <code><a href="api/router/RouterLinkActive#isActive" class="code-anchor">isActive</a></code> 表达式返回真值时，<code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> 会把 <code>ItemDetailComponent</code> 添加到 DOM 中。当表达式为假值时，<code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> 将从 DOM 中删除 <code>ItemDetailComponent</code>，从而销毁该组件及其所有子组件。</p><p translation-origin="off">When the <code><a href="api/router/RouterLinkActive#isActive" class="code-anchor">isActive</a></code> expression returns a truthy value, <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> adds the <code>ItemDetailComponent</code> to the DOM. When the expression is falsy, <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> removes the <code>ItemDetailComponent</code> from the DOM, destroying that component and all of its sub-components.</p><h4 id="showhide-vs-ngif" translation-result="on">显示/隐藏与 <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#showhide-vs-ngif"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="showhide-vs-ngif">Show/hide vs. <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#showhide-vs-ngif"><i class="material-icons">link</i></a></h4><p translation-result="on">隐藏元素与使用 <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> 删除元素不同。为了进行比较，下面的示例演示如何使用<a href="guide/template-syntax#class-binding">类</a>或<a href="guide/template-syntax#style-binding">样式</a>绑定来控制元素的可见性。</p><p translation-origin="off">Hiding an element is different from removing it with <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code>. For comparison, the following example shows how to control the visibility of an element with a <a href="guide/template-syntax#class-binding">class</a> or <a href="guide/template-syntax#style-binding">style</a> binding.</p><code-example path="built-in-directives/src/app/app.component.html" region="NgIf-3" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;!-- isSpecial is true --&gt; &lt;div [class.hidden]="!isSpecial"&gt;Show with class&lt;/div&gt; &lt;div [class.hidden]="isSpecial"&gt;Hide with class&lt;/div&gt; &lt;p&gt;ItemDetail is in the DOM but hidden&lt;/p&gt; &lt;app-item-detail [class.hidden]="isSpecial"&gt;&lt;/app-item-detail&gt; &lt;div [style.display]="isSpecial ? 'block' : 'none'"&gt;Show with <a href="api/animations/style" class="code-anchor">style</a>&lt;/div&gt; &lt;div [style.display]="isSpecial ? 'none' : 'block'"&gt;Hide with <a href="api/animations/style" class="code-anchor">style</a>&lt;/div&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">&lt;!-- isSpecial is true --&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> [</span><span class="atn">class</span><span class="pln">.</span><span class="atn">hidden</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"!isSpecial"</span><span class="tag">&gt;</span><span class="pln">Show with class</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> [</span><span class="atn">class</span><span class="pln">.</span><span class="atn">hidden</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"isSpecial"</span><span class="tag">&gt;</span><span class="pln">Hide with class</span><span class="tag">&lt;/div&gt;</span><span class="pln">

</span><span class="tag">&lt;p&gt;</span><span class="pln">ItemDetail is in the DOM but hidden</span><span class="tag">&lt;/p&gt;</span><span class="pln">
</span><span class="tag">&lt;app-item-detail</span><span class="pln"> [</span><span class="atn">class</span><span class="pln">.</span><span class="atn">hidden</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"isSpecial"</span><span class="tag">&gt;&lt;/app-item-detail&gt;</span><span class="pln">

</span><span class="tag">&lt;div</span><span class="pln"> [</span><span class="atn">style</span><span class="pln">.</span><span class="atn">display</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"isSpecial ? 'block' : 'none'"</span><span class="tag">&gt;</span><span class="pln">Show with </span><a href="api/animations/style" class="code-anchor"><span class="pln">style</span></a><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> [</span><span class="atn">style</span><span class="pln">.</span><span class="atn">display</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"isSpecial ? 'none'  : 'block'"</span><span class="tag">&gt;</span><span class="pln">Hide with </span><a href="api/animations/style" class="code-anchor"><span class="pln">style</span></a><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">隐藏元素时，该元素及其所有后代仍保留在 DOM 中。这些元素的所有组件都保留在内存中，Angular 会继续做变更检查。它可能会占用大量计算资源，并且会不必要地降低性能。</p><p translation-origin="off">When you hide an element, that element and all of its descendants remain in the DOM. All components for those elements stay in memory and Angular may continue to check for changes. You could be holding onto considerable computing resources and degrading performance unnecessarily.</p><p translation-result="on"><code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> 工作方式有所不同。如果 <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> 为 <code>false</code>，则 Angular 将从 DOM 中删除该元素及其后代。这销毁了它们的组件，释放了资源，从而带来更好的用户体验。</p><p translation-origin="off"><code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> works differently. When <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> is <code>false</code>, Angular removes the element and its descendants from the DOM. It destroys their components, freeing up resources, which results in a better user experience.</p><p translation-result="on">如果要隐藏大型组件树，请考虑使用 <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> 作为显示/隐藏的更有效替代方法。</p><p translation-origin="off">If you are hiding large component trees, consider <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> as a more efficient alternative to showing/hiding.</p><div class="alert is-helpful"><p translation-result="on">有关 <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> 和 <code><a href="api/common/NgIf#ngIfElse" class="code-anchor">ngIfElse</a></code> 的更多信息，请参阅 <a href="api/common/NgIf">关于 NgIf 的 API 文档</a>。</p><p translation-origin="off">For more information on <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> and <code><a href="api/common/NgIf#ngIfElse" class="code-anchor">ngIfElse</a></code>, see the <a href="api/common/NgIf">API documentation about NgIf</a>.</p></div><h4 id="guard-against-null" translation-result="on">防范空指针错误<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#guard-against-null"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="guard-against-null">Guard against null<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#guard-against-null"><i class="material-icons">link</i></a></h4><p translation-result="on"><code><a href="api/common/NgIf" class="code-anchor">ngIf</a></code> 另一个优点是您可以使用它来防范空指针错误。显示/隐藏就是最合适的极简用例，当您需要防范时，请改用 <code><a href="api/common/NgIf" class="code-anchor">ngIf</a></code> 代替。如果其中嵌套的表达式尝试访问 <code>null</code> 的属性，Angular 将引发错误。</p><p translation-origin="off">Another advantage of <code><a href="api/common/NgIf" class="code-anchor">ngIf</a></code> is that you can use it to guard against null. Show/hide is best suited for very simple use cases, so when you need a guard, opt instead for <code><a href="api/common/NgIf" class="code-anchor">ngIf</a></code>. Angular will throw an error if a nested expression tries to access a property of <code>null</code>.</p><p translation-result="on">下面的例子中 <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> 保护着两个 <code>&lt;div&gt;</code>。仅当存在 <code>currentCustomer</code> 时，才会显示 <code>currentCustomer</code> 名称。除非它为 <code>null</code> 否则不会显示 <code>nullCustomer</code>。</p><p translation-origin="off">The following shows <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> guarding two <code>&lt;div&gt;</code>s. The <code>currentCustomer</code> name appears only when there is a <code>currentCustomer</code>. The <code>nullCustomer</code> will not be displayed as long as it is <code>null</code>.</p><code-example path="built-in-directives/src/app/app.component.html" region="NgIf-2" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="currentCustomer"&gt;Hello, {{currentCustomer.name}}&lt;/div&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"currentCustomer"</span><span class="tag">&gt;</span><span class="pln">Hello, {{currentCustomer.name}}</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><code-example path="built-in-directives/src/app/app.component.html" region="NgIf-2b" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="nullCustomer"&gt;Hello, &lt;span&gt;{{nullCustomer}}&lt;/span&gt;&lt;/div&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"nullCustomer"</span><span class="tag">&gt;</span><span class="pln">Hello, </span><span class="tag">&lt;span&gt;</span><span class="pln">{{nullCustomer}}</span><span class="tag">&lt;/span&gt;&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p translation-result="on">另请参见下面的<a href="guide/template-syntax#safe-navigation-operator" title="安全导航运算符（?.）">安全导航运算符</a> 。</p><p translation-origin="off">See also the <a href="guide/template-syntax#safe-navigation-operator" title="Safe navigation operator (?.)">safe navigation operator</a> below.</p></div><hr><a id="ngFor"></a><h3 id="ngfor"><code>NgFor</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#ngfor"><i class="material-icons">link</i></a></h3><p translation-result="on"><code>NgFor</code> 是一个重复器指令 —— 一种用来显示条目列表的方法。您定义了一个 HTML 块，该 HTML 块定义了应如何显示单个条目，然后告诉 Angular 以该块为模板来渲染列表中的每个条目。赋值给 <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> 的文本是用来指导重复器工作过程的指令。</p><p translation-origin="off"><code>NgFor</code> is a repeater directive—a way to present a list of items. You define a block of HTML that defines how a single item should be displayed and then you tell Angular to use that block as a template for rendering each item in the list. The text assigned to <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> is the instruction that guides the repeater process.</p><p translation-result="on">以下示例显示了如何将 <code>NgFor</code> 应用于简单的 <code>&lt;div&gt;</code>。 （不要忘了 <code><a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> 前面的星号（<code>*</code>）。）</p><p translation-origin="off">The following example shows <code>NgFor</code> applied to a simple <code>&lt;div&gt;</code>. (Don't forget the asterisk (<code>*</code>) in front of <code><a href="api/common/NgForOf" class="code-anchor">ngFor</a></code>.)</p><code-example path="built-in-directives/src/app/app.component.html" region="NgFor-1" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a> of items"&gt;{{item.name}}&lt;/div&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atv">item</span></a><span class="atv"> of items"</span><span class="tag">&gt;</span><span class="pln">{{item.name}}</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">您还可以将 <code>NgFor</code> 应用于组件元素，如以下示例所示。</p><p translation-origin="off">You can also apply an <code>NgFor</code> to a component element, as in the following example.</p><code-example path="built-in-directives/src/app/app.component.html" region="NgFor-2" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;app-item-detail *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a> of items" [<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>]="<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>"&gt;&lt;/app-item-detail&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;app-item-detail</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atv">item</span></a><span class="atv"> of items"</span><span class="pln"> [</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atn">item</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atv">item</span></a><span class="atv">"</span><span class="tag">&gt;&lt;/app-item-detail&gt;</span></code>
    </pre></aio-code></code-example><a id="microsyntax"></a><div class="callout is-critical"><header translation-result="on">`*ngFor` 微语法</header><header translation-origin="off">*ngFor microsyntax</header><p translation-result="on">赋值给 <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> 的字符串不是<a href="guide/template-syntax#template-expressions">模板表达式</a> 。而是一个<em>微语法</em> —— 由 Angular 解释的一种小型语言。字符串 <code>"let <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a> of items"</code> 的意思是：</p><p translation-origin="off">The string assigned to <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> is not a <a href="guide/template-syntax#template-expressions">template expression</a>. Rather, it's a <em>microsyntax</em>—a little language of its own that Angular interprets. The string <code>"let <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a> of items"</code> means:</p><blockquote><p translation-result="on"><em>将 <code>items</code> 数组中的每个条目存储在局部循环变量 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 中，并使其可用于每次迭代的模板 HTML 中。</em></p><p translation-origin="off"><em>Take each item in the <code>items</code> array, store it in the local <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> looping variable, and make it available to the templated HTML for each iteration.</em></p></blockquote><p translation-result="on">Angular 将该指令转换为包裹着宿主元素的 <code>&lt;ng-template&gt;</code>，然后反复使用此模板为列表中的每个 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 创建一组新的元素和绑定。有关微语法的更多信息，请参见<a href="guide/structural-directives#microsyntax">结构型指令</a>一章。</p><p translation-origin="off">Angular translates this instruction into an <code>&lt;ng-template&gt;</code> around the host element, then uses this template repeatedly to create a new set of elements and bindings for each <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> in the list. For more information about microsyntax, see the <a href="guide/structural-directives#microsyntax">Structural Directives</a> guide.</p></div><a id="template-input-variable"></a> <a id="template-input-variables"></a><h4 id="template-input-variables" translation-result="on">模板输入变量<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#template-input-variables"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="template-input-variables">Template input variables<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#template-input-variables"><i class="material-icons">link</i></a></h4><p translation-result="on"><code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 前面的 <code>let</code> 关键字创建了一个名为 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 的模板输入变量。 <code><a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> 指令迭代父组件的 <code>items</code> 属性所返回的 <code>items</code> 数组，并在每次迭代期间将 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 设置为该数组中的当前条目。</p><p translation-origin="off">The <code>let</code> keyword before <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> creates a template input variable called <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code>. The <code><a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> directive iterates over the <code>items</code> array returned by the parent component's <code>items</code> property and sets <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> to the current item from the array during each iteration.</p><p translation-result="on"><code><a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> 的宿主元素及其后代中可引用 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> ，来访问该条目的属性。以下示例首先在插值中引用 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code>，然后把一个绑定表达式传入 <code>&lt;app-item-detail&gt;</code> 组件的 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 属性。</p><p translation-origin="off">Reference <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> within the <code><a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> host element as well as within its descendants to access the item's properties. The following example references <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> first in an interpolation and then passes in a binding to the <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> property of the <code>&lt;app-item-detail&gt;</code> component.</p><code-example path="built-in-directives/src/app/app.component.html" region="NgFor-1-2" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a> of items"&gt;{{item.name}}&lt;/div&gt; &lt;!-- . . . --&gt; &lt;app-item-detail *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a> of items" [<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>]="<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>"&gt;&lt;/app-item-detail&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atv">item</span></a><span class="atv"> of items"</span><span class="tag">&gt;</span><span class="pln">{{item.name}}</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="com">&lt;!-- . . . --&gt;</span><span class="pln">
  </span><span class="tag">&lt;app-item-detail</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atv">item</span></a><span class="atv"> of items"</span><span class="pln"> [</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atn">item</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atv">item</span></a><span class="atv">"</span><span class="tag">&gt;&lt;/app-item-detail&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">有关模板输入变量的更多信息，请参见<a href="guide/structural-directives#template-input-variable">结构型指令</a> 。</p><p translation-origin="off">For more information about template input variables, see <a href="guide/structural-directives#template-input-variable">Structural Directives</a>.</p><h4 id="ngfor-with-index" translation-result="on"><code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> 与 <code>index</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#ngfor-with-index"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="ngfor-with-index"><code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> with <code>index</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#ngfor-with-index"><i class="material-icons">link</i></a></h4><p translation-result="on"><code>NgFor</code> 指令上下文中的 <code>index</code> 属性在每次迭代中返回该条目的从零开始的索引。 您可以在模板输入变量中捕获 <code>index</code>，并在模板中使用它。</p><p translation-origin="off">The <code>index</code> property of the <code>NgFor</code> directive context returns the zero-based index of the item in each iteration. You can capture the <code>index</code> in a template input variable and use it in the template.</p><p translation-result="on">下面的例子在名为 <code>i</code> 的变量中捕获 <code>index</code> ，并将其与条目名称一起显示。</p><p translation-origin="off">The next example captures the <code>index</code> in a variable named <code>i</code> and displays it with the item name.</p><code-example path="built-in-directives/src/app/app.component.html" region="NgFor-3" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a> of items; let i=index"&gt;{{i + 1}} - {{item.name}}&lt;/div&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atv">item</span></a><span class="atv"> of items; let i=index"</span><span class="tag">&gt;</span><span class="pln">{{i + 1}} - {{item.name}}</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p translation-result="on">要学习更多的<em>类似 index</em> 的值，例如 <code>last</code>、<code><a href="api/common/NgForOfContext#even" class="code-anchor">even</a></code> 和 <code><a href="api/common/NgForOfContext#odd" class="code-anchor">odd</a></code>，请参阅 <a href="api/common/NgForOf">NgFor API 参考</a>。</p><p translation-origin="off"><code>NgFor</code> is implemented by the <code><a href="api/common/NgForOf" class="code-anchor">NgForOf</a></code> directive. Read more about the other <code><a href="api/common/NgForOf" class="code-anchor">NgForOf</a></code> context values such as <code>last</code>, <code><a href="api/common/NgForOfContext#even" class="code-anchor">even</a></code>, and <code><a href="api/common/NgForOfContext#odd" class="code-anchor">odd</a></code> in the <a href="api/common/NgForOf">NgForOf API reference</a>.</p></div><a id="trackBy"></a><h4 id="ngfor-with-trackby" translation-result="on">带 <code>trackBy</code> 的 <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#ngfor-with-trackby"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="ngfor-with-trackby">*ngFor with <code>trackBy</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#ngfor-with-trackby"><i class="material-icons">link</i></a></h4><p translation-result="on">如果将 <code>NgFor</code> 与大型列表一起使用，则对某个条目的较小更改（例如删除或添加一项）就会触发一系列 DOM 操作。 例如，重新查询服务器可能会重置包含所有新条目对象的列表，即使先前已显示这些条目也是如此。在这种情况下，Angular 只能看到由新的对象引用组成的新列表，它别无选择，只能用所有新的 DOM 元素替换旧的 DOM 元素。</p><p translation-origin="off">If you use <code>NgFor</code> with large lists, a small change to one item, such as removing or adding an item, can trigger a cascade of DOM manipulations. For example, re-querying the server could reset a list with all new item objects, even when those items were previously displayed. In this case, Angular sees only a fresh list of new object references and has no choice but to replace the old DOM elements with all new DOM elements.</p><p translation-result="on">您可以使用 <code>trackBy</code> 来让它更加高效。向该组件添加一个方法，该方法返回 <code>NgFor</code> 应该跟踪的值。这个例子中，该值是英雄的 <code>id</code> 。如果 <code>id</code> 已经被渲染，Angular 就会跟踪它，而不会重新向服务器查询相同的 <code>id</code> 。</p><p translation-origin="off">You can make this more efficient with <code>trackBy</code>. Add a method to the component that returns the value <code>NgFor</code> should track. In this case, that value is the hero's <code>id</code>. If the <code>id</code> has already been rendered, Angular keeps track of it and doesn't re-query the server for the same <code>id</code>.</p><code-example path="built-in-directives/src/app/app.component.ts" region="trackByItems" header="src/app/app.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">trackByItems(index: number, <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>: Item): number { return item.id; }</div><header class="ng-star-inserted">src/app/app.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">trackByItems</span><span class="pun">(</span><span class="pln">index</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="pln">item</span></a><span class="pun">:</span><span class="pln"> </span><span class="typ">Item</span><span class="pun">):</span><span class="pln"> number </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> item</span><span class="pun">.</span><span class="pln">id</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">在微语法表达式中，将 <code>trackBy</code> 设置为 <code>trackByItems()</code> 方法。</p><p translation-origin="off">In the microsyntax expression, set <code>trackBy</code> to the <code>trackByItems()</code> method.</p><code-example path="built-in-directives/src/app/app.component.html" region="trackBy" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a> of items; trackBy: trackByItems"&gt; ({{item.id}}) {{item.name}} &lt;/div&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atv">item</span></a><span class="atv"> of items; trackBy: trackByItems"</span><span class="tag">&gt;</span><span class="pln">
  ({{item.id}}) {{item.name}}
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">这就是 <code>trackBy</code> 效果的说明。 “Reset items” 将创建具有相同 <code>item.id</code> 的新条目。 “Change ids” 将使用新的 <code>item.id</code> 创建新条目。</p><p translation-origin="off">Here is an illustration of the <code>trackBy</code> effect. "Reset items" creates new items with the same <code>item.id</code>s. "Change ids" creates new items with new <code>item.id</code>s.</p><ul><li><p translation-result="on">如果没有 <code>trackBy</code>，这些按钮都会触发完全的 DOM 元素替换。</p><p translation-origin="off">With no <code>trackBy</code>, both buttons trigger complete DOM element replacement.</p></li><li><p translation-result="on">有了 <code>trackBy</code>，则只有修改了 <code>id</code> 的按钮才会触发元素替换。</p><p translation-origin="off">With <code>trackBy</code>, only changing the <code>id</code> triggers element replacement.</p></li></ul><div class="lightbox"><img src="generated/images/guide/built-in-directives/ngfor-trackby.gif" alt="Animation of trackBy" width="492" height="442"></div><div class="alert is-helpful"><p translation-result="on">内置指令仅仅使用了公共 API。也就是说，它们没有用到任何其他指令无权访问的私有 API。</p><p translation-origin="off">Built-in directives use only public APIs; that is, they do not have special access to any private APIs that other directives can't access.</p></div><hr><a id="ngSwitch"></a><h2 id="the-ngswitch-directives" translation-result="on"><code><a href="api/common/NgSwitch" class="code-anchor">NgSwitch</a></code> 指令<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#the-ngswitch-directives"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="the-ngswitch-directives">The <code><a href="api/common/NgSwitch" class="code-anchor">NgSwitch</a></code> directives<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#the-ngswitch-directives"><i class="material-icons">link</i></a></h2><p translation-result="on">NgSwitch 类似于 JavaScript <code>switch</code> 语句。它根据切换条件显示几个可能的元素中的一个。 Angular 只会将选定的元素放入 DOM。</p><p translation-origin="off">NgSwitch is like the JavaScript <code>switch</code> statement. It displays one element from among several possible elements, based on a switch condition. Angular puts only the selected element into the DOM.</p><p translation-result="on"><code><a href="api/common/NgSwitch" class="code-anchor">NgSwitch</a></code> 实际上是三个协作指令的集合： <code><a href="api/common/NgSwitch" class="code-anchor">NgSwitch</a></code> ， <code><a href="api/common/NgSwitchCase" class="code-anchor">NgSwitchCase</a></code> 和 <code><a href="api/common/NgSwitchDefault" class="code-anchor">NgSwitchDefault</a></code>，如以下示例所示。</p><p translation-origin="off"><code><a href="api/common/NgSwitch" class="code-anchor">NgSwitch</a></code> is actually a set of three, cooperating directives: <code><a href="api/common/NgSwitch" class="code-anchor">NgSwitch</a></code>, <code><a href="api/common/NgSwitchCase" class="code-anchor">NgSwitchCase</a></code>, and <code><a href="api/common/NgSwitchDefault" class="code-anchor">NgSwitchDefault</a></code> as in the following example.</p><p><code-example path="built-in-directives/src/app/app.component.html" region="NgSwitch" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div [<a href="api/common/NgSwitch" class="code-anchor">ngSwitch</a>]="currentItem.feature"&gt; &lt;app-stout-item *<a href="api/common/NgSwitchCase" class="code-anchor">ngSwitchCase</a>="'stout'" [<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>]="currentItem"&gt;&lt;/app-stout-item&gt; &lt;app-device-item *<a href="api/common/NgSwitchCase" class="code-anchor">ngSwitchCase</a>="'slim'" [<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>]="currentItem"&gt;&lt;/app-device-item&gt; &lt;app-lost-item *<a href="api/common/NgSwitchCase" class="code-anchor">ngSwitchCase</a>="'vintage'" [<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>]="currentItem"&gt;&lt;/app-lost-item&gt; &lt;app-best-item *<a href="api/common/NgSwitchCase" class="code-anchor">ngSwitchCase</a>="'bright'" [<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>]="currentItem"&gt;&lt;/app-best-item&gt; &lt;!-- . . . --&gt; &lt;app-unknown-item *<a href="api/common/NgSwitchDefault" class="code-anchor">ngSwitchDefault</a> [<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>]="currentItem"&gt;&lt;/app-unknown-item&gt; &lt;/div&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> [</span><a href="api/common/NgSwitch" class="code-anchor"><span class="atn">ngSwitch</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"currentItem.feature"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;app-stout-item</span><span class="pln">    *</span><a href="api/common/NgSwitchCase" class="code-anchor"><span class="atn">ngSwitchCase</span></a><span class="pun">=</span><span class="atv">"'stout'"</span><span class="pln">    [</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atn">item</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"currentItem"</span><span class="tag">&gt;&lt;/app-stout-item&gt;</span><span class="pln">
  </span><span class="tag">&lt;app-device-item</span><span class="pln">   *</span><a href="api/common/NgSwitchCase" class="code-anchor"><span class="atn">ngSwitchCase</span></a><span class="pun">=</span><span class="atv">"'slim'"</span><span class="pln">     [</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atn">item</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"currentItem"</span><span class="tag">&gt;&lt;/app-device-item&gt;</span><span class="pln">
  </span><span class="tag">&lt;app-lost-item</span><span class="pln">     *</span><a href="api/common/NgSwitchCase" class="code-anchor"><span class="atn">ngSwitchCase</span></a><span class="pun">=</span><span class="atv">"'vintage'"</span><span class="pln">  [</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atn">item</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"currentItem"</span><span class="tag">&gt;&lt;/app-lost-item&gt;</span><span class="pln">
  </span><span class="tag">&lt;app-best-item</span><span class="pln">     *</span><a href="api/common/NgSwitchCase" class="code-anchor"><span class="atn">ngSwitchCase</span></a><span class="pun">=</span><span class="atv">"'bright'"</span><span class="pln">   [</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atn">item</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"currentItem"</span><span class="tag">&gt;&lt;/app-best-item&gt;</span><span class="pln">
</span><span class="com">&lt;!-- . . . --&gt;</span><span class="pln">
  </span><span class="tag">&lt;app-unknown-item</span><span class="pln">  *</span><a href="api/common/NgSwitchDefault" class="code-anchor"><span class="atn">ngSwitchDefault</span></a><span class="pln">           [</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atn">item</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"currentItem"</span><span class="tag">&gt;&lt;/app-unknown-item&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example></p><div class="lightbox"><img src="generated/images/guide/built-in-directives/ngswitch.gif" alt="Animation of NgSwitch" width="370" height="256"></div><p translation-result="on"><code><a href="api/common/NgSwitch" class="code-anchor">NgSwitch</a></code> 是控制器指令。把它绑定到一个返回<em>开关值</em>的表达式，例如 <code>feature</code> 。尽管此示例中的 <code>feature</code> 值是字符串，但开关值可以是任何类型。</p><p translation-origin="off"><code><a href="api/common/NgSwitch" class="code-anchor">NgSwitch</a></code> is the controller directive. Bind it to an expression that returns the <em>switch value</em>, such as <code>feature</code>. Though the <code>feature</code> value in this example is a string, the switch value can be of any type.</p><p translation-result="on"><strong>绑定到 <code>[<a href="api/common/NgSwitch" class="code-anchor">ngSwitch</a>]</code></strong>。如果试图写成 <code>*<a href="api/common/NgSwitch" class="code-anchor">ngSwitch</a></code>，就会出现错误，因为 <code><a href="api/common/NgSwitch" class="code-anchor">NgSwitch</a></code> 是<em>属性型</em>指令，而不是<em>结构型</em>指令。它不会直接接触 DOM，而是会更改与之相伴的指令的行为。</p><p translation-origin="off"><strong>Bind to <code>[<a href="api/common/NgSwitch" class="code-anchor">ngSwitch</a>]</code></strong>. You'll get an error if you try to set <code>*<a href="api/common/NgSwitch" class="code-anchor">ngSwitch</a></code> because <code><a href="api/common/NgSwitch" class="code-anchor">NgSwitch</a></code> is an <em>attribute</em> directive, not a <em>structural</em> directive. Rather than touching the DOM directly, it changes the behavior of its companion directives.</p><p translation-result="on"><strong>绑定到 <code>*<a href="api/common/NgSwitchCase" class="code-anchor">ngSwitchCase</a></code> 和 <code>*<a href="api/common/NgSwitchDefault" class="code-anchor">ngSwitchDefault</a></code></strong> <code><a href="api/common/NgSwitchCase" class="code-anchor">NgSwitchCase</a></code> 和 <code><a href="api/common/NgSwitchDefault" class="code-anchor">NgSwitchDefault</a></code> 指令都是<em>结构型指令</em>，因为它们会从 DOM 中添加或移除元素。</p><p translation-origin="off"><strong>Bind to <code>*<a href="api/common/NgSwitchCase" class="code-anchor">ngSwitchCase</a></code> and <code>*<a href="api/common/NgSwitchDefault" class="code-anchor">ngSwitchDefault</a></code></strong>. The <code><a href="api/common/NgSwitchCase" class="code-anchor">NgSwitchCase</a></code> and <code><a href="api/common/NgSwitchDefault" class="code-anchor">NgSwitchDefault</a></code> directives are <em>structural</em> directives because they add or remove elements from the DOM.</p><ul><li><p translation-result="on">当 <code><a href="api/common/NgSwitchCase" class="code-anchor">NgSwitchCase</a></code> 的绑定值等于开关值时，就将其元素添加到 DOM 中；否则从 DOM 中删除。</p><p translation-origin="off"><code><a href="api/common/NgSwitchCase" class="code-anchor">NgSwitchCase</a></code> adds its element to the DOM when its bound value equals the switch value and removes its bound value when it doesn't equal the switch value.</p></li></ul><ul><li><p translation-result="on"> <code><a href="api/common/NgSwitchDefault" class="code-anchor">NgSwitchDefault</a></code> 会在没有任何一个 <code><a href="api/common/NgSwitchCase" class="code-anchor">NgSwitchCase</a></code> 被选中时把它所在的元素加入 DOM 中。</p><p translation-origin="off"><code><a href="api/common/NgSwitchDefault" class="code-anchor">NgSwitchDefault</a></code> adds its element to the DOM when there is no selected <code><a href="api/common/NgSwitchCase" class="code-anchor">NgSwitchCase</a></code>.</p></li></ul><p translation-result="on">开关指令对于添加和删除<em>组件元素</em>特别有用。本示例在 <code>item-switch.components.ts</code> 文件中定义的四个 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 组件之间切换。每个组件都有一个名叫 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 的<a href="guide/template-syntax#inputs-outputs" title="输入属性">输入属性</a> ，它会绑定到父组件的 <code>currentItem</code> 。</p><p translation-origin="off">The switch directives are particularly useful for adding and removing <em>component elements</em>. This example switches among four <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> components defined in the <code>item-switch.components.ts</code> file. Each component has an <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> <a href="guide/template-syntax#inputs-outputs" title="Input property">input property</a> which is bound to the <code>currentItem</code> of the parent component.</p><p translation-result="on">开关指令也同样适用于原生元素和 Web Component。 比如，你可以把 <code>&lt;app-best-item&gt;</code> 分支替换为如下代码。</p><p translation-origin="off">Switch directives work as well with native elements and web components too. For example, you could replace the <code>&lt;app-best-item&gt;</code> switch case with the following.</p><code-example path="built-in-directives/src/app/app.component.html" region="NgSwitch-div" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div *<a href="api/common/NgSwitchCase" class="code-anchor">ngSwitchCase</a>="'bright'"&gt; Are you as bright as {{currentItem.name}}?&lt;/div&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgSwitchCase" class="code-anchor"><span class="atn">ngSwitchCase</span></a><span class="pun">=</span><span class="atv">"'bright'"</span><span class="tag">&gt;</span><span class="pln"> Are you as bright as {{currentItem.name}}?</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><hr><a id="template-reference-variable"></a> <a id="template-reference-variables--var-"></a> <a id="ref-vars"></a> <a id="ref-var"></a><h2 id="template-reference-variables-var" translation-result="on">模板引用变量（ <code>#var</code> ）<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#template-reference-variables-var"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="template-reference-variables-var">Template reference variables (<code>#var</code>)<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#template-reference-variables-var"><i class="material-icons">link</i></a></h2><p translation-result="on"><strong>模板引用变量</strong>通常是对模板中 DOM 元素的引用。它还可以引用指令（包含组件）、元素、<a href="api/core/TemplateRef">TemplateRef</a> 或 <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" title="MDN：Web Component">Web Component</a> 。</p><p translation-origin="off">A <strong>template reference variable</strong> is often a reference to a DOM element within a template. It can also refer to a directive (which contains a component), an element, <a href="api/core/TemplateRef">TemplateRef</a>, or a <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" title="MDN: Web Components">web component</a>.</p><p translation-result="on">有关本节中语法和代码段的演示，请参见<live-example name="template-reference-variables" ng-version="9.0.0-rc.11"><span style="display:none">模板参考变量示例</span><span><span class="ng-star-inserted"><a target="_blank" title="模板参考变量示例" href="generated/live-examples/template-reference-variables/stackblitz.html">模板参考变量示例</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/template-reference-variables/template-reference-variables.zip">下载范例</a></span></span></span></live-example>。</p><p translation-origin="off">For a demonstration of the syntax and code snippets in this section, see the<live-example name="template-reference-variables" ng-version="9.0.0-rc.11"><span style="display:none">template reference variables example</span><span><span class="ng-star-inserted"><a target="_blank" title="template reference variables example" href="generated/live-examples/template-reference-variables/stackblitz.html">template reference variables example</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/template-reference-variables/template-reference-variables.zip">下载范例</a></span></span></span></live-example>.</p><p translation-result="on">使用井号（#）声明模板引用变量。以下模板引用变量 <code>#phone</code> 会在 <code>&lt;input&gt;</code> 元素上声明了一个 <code>phone</code> 变量。</p><p translation-origin="off">Use the hash symbol (#) to declare a reference variable. The following reference variable, <code>#phone</code>, declares a <code>phone</code> variable on an <code>&lt;input&gt;</code> element.</p><code-example path="template-reference-variables/src/app/app.component.html" region="ref-var" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;input #phone placeholder="phone number" /&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;input</span><span class="pln"> #</span><span class="atn">phone</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"phone number"</span><span class="pln"> </span><span class="tag">/&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">您可以在组件模板中的任何位置引用模板引用变量。这个例子中，模板下方的 <code>&lt;button&gt;</code> 就引用了 <code>phone</code> 变量。</p><p translation-origin="off">You can refer to a template reference variable anywhere in the component's template. Here, a <code>&lt;button&gt;</code> further down the template refers to the <code>phone</code> variable.</p><code-example path="template-reference-variables/src/app/app.component.html" region="ref-phone" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;input #phone placeholder="phone number" /&gt; &lt;!-- lots of other elements --&gt; &lt;!-- phone refers to the input element; pass its `value` to an event handler --&gt; &lt;button (click)="callPhone(phone.value)"&gt;Call&lt;/button&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;input</span><span class="pln"> #</span><span class="atn">phone</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"phone number"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">

</span><span class="com">&lt;!-- lots of other elements --&gt;</span><span class="pln">

</span><span class="com">&lt;!-- phone refers to the input element; pass its `value` to an event handler --&gt;</span><span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"callPhone(phone.value)"</span><span class="tag">&gt;</span><span class="pln">Call</span><span class="tag">&lt;/button&gt;</span></code>
    </pre></aio-code></code-example><h3 class="no-toc" id="how-a-reference-variable-gets-its-value" translation-result="on">模板引用变量怎么得到它的值？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#how-a-reference-variable-gets-its-value"><i class="material-icons">link</i></a></h3><h3 class="no-toc" translation-origin="off" id="how-a-reference-variable-gets-its-value">How a reference variable gets its value<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#how-a-reference-variable-gets-its-value"><i class="material-icons">link</i></a></h3><p translation-result="on">在大多数情况下，Angular 会将模板引用变量的值设置为声明该变量的元素。在上一个示例中，<code>phone</code> 指的是电话号码的 <code>&lt;input&gt;</code> 。按钮的单击处理程序将把这个 <code>&lt;input&gt;</code> 的值传给组件的 <code>callPhone()</code> 方法。</p><p translation-origin="off">In most cases, Angular sets the reference variable's value to the element on which it is declared. In the previous example, <code>phone</code> refers to the phone number <code>&lt;input&gt;</code>. The button's click handler passes the <code>&lt;input&gt;</code> value to the component's <code>callPhone()</code> method.</p><p translation-result="on"><code><a href="api/forms/NgForm" class="code-anchor">NgForm</a></code> 指令可以更改该行为并将该值设置为其他值。在以下示例中，模板引用变量 <code>itemForm</code> 出现了 3 次，由 HTML 分隔。</p><p translation-origin="off">The <code><a href="api/forms/NgForm" class="code-anchor">NgForm</a></code> directive can change that behavior and set the value to something else. In the following example, the template reference variable, <code>itemForm</code>, appears three times separated by HTML.</p><code-example path="template-reference-variables/src/app/app.component.html" region="ngForm" header="src/app/hero-form.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;form #itemForm="<a href="api/forms/NgForm" class="code-anchor">ngForm</a>" (ngSubmit)="onSubmit(itemForm)"&gt; &lt;label for="name" &gt;Name &lt;input class="form-control" name="name" <a href="api/forms/NgModel" class="code-anchor">ngModel</a> required /&gt; &lt;/label&gt; &lt;button type="submit"&gt;Submit&lt;/button&gt; &lt;/form&gt; &lt;div [hidden]="!itemForm.form.valid"&gt; &lt;p&gt;{{ submitMessage }}&lt;/p&gt; &lt;/div&gt;</div><header class="ng-star-inserted">src/app/hero-form.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/hero-form.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;form</span><span class="pln"> #</span><span class="atn">itemForm</span><span class="pun">=</span><span class="atv">"</span><a href="api/forms/NgForm" class="code-anchor"><span class="atv">ngForm</span></a><span class="atv">"</span><span class="pln"> (</span><span class="atn">ngSubmit</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"onSubmit(itemForm)"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"name"</span><span class="pln">
    </span><span class="tag">&gt;</span><span class="pln">Name </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"name"</span><span class="pln"> </span><a href="api/forms/NgModel" class="code-anchor"><span class="atn">ngModel</span></a><span class="pln"> </span><span class="atn">required</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="tag">&gt;</span><span class="pln">Submit</span><span class="tag">&lt;/button&gt;</span><span class="pln">
</span><span class="tag">&lt;/form&gt;</span><span class="pln">

</span><span class="tag">&lt;div</span><span class="pln"> [</span><span class="atn">hidden</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"!itemForm.form.valid"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;p&gt;</span><span class="pln">{{ submitMessage }}</span><span class="tag">&lt;/p&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">当 itemForm 的引用没有 <code>"<a href="api/forms/NgForm" class="code-anchor">ngForm</a>"</code> 值时，它将是 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement">HTMLFormElement</a> 。不过，组件和指令之间的区别在于，在不指定属性值的情况下组件将引用自身（隐式引用），而指令不会更改隐式引用（仍为所在元素）。</p><p translation-origin="off">The reference value of itemForm, without the ngForm attribute value, would be the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement">HTMLFormElement</a>. There is, however, a difference between a Component and a Directive in that a <code><a href="api/core/Component" class="code-anchor">Component</a></code> will be referenced without specifying the attribute value, and a <code><a href="api/core/Directive" class="code-anchor">Directive</a></code> will not change the implicit reference (that is, the element).</p><p translation-result="on">但是，带有 <code><a href="api/forms/NgForm" class="code-anchor">NgForm</a></code> 时， <code>itemForm</code> 就是对 <a href="api/forms/NgForm" title="API：NgForm">NgForm</a> 指令的引用，它能够跟踪表单中每个控件的值和有效性。</p><p translation-origin="off">However, with <code><a href="api/forms/NgForm" class="code-anchor">NgForm</a></code>, <code>itemForm</code> is a reference to the <a href="api/forms/NgForm" title="API: NgForm">NgForm</a> directive with the ability to track the value and validity of every control in the form.</p><p translation-result="on">原生 <code>&lt;form&gt;</code> 元素没有 <code>form</code> 属性，但 <code><a href="api/forms/NgForm" class="code-anchor">NgForm</a></code> 指令有，这样就能在 <code>itemForm.form.valid</code> 无效的情况下禁用提交按钮，并将整个表单控制树传给父组件的 <code>onSubmit()</code> 方法。 。</p><p translation-origin="off">The native <code>&lt;form&gt;</code> element doesn't have a <code>form</code> property, but the <code><a href="api/forms/NgForm" class="code-anchor">NgForm</a></code> directive does, which allows disabling the submit button if the <code>itemForm.form.valid</code> is invalid and passing the entire form control tree to the parent component's <code>onSubmit()</code> method.</p><h3 class="no-toc" id="template-reference-variable-considerations" translation-result="on">对模板引用变量的思考<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#template-reference-variable-considerations"><i class="material-icons">link</i></a></h3><h3 class="no-toc" translation-origin="off" id="template-reference-variable-considerations">Template reference variable considerations<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#template-reference-variable-considerations"><i class="material-icons">link</i></a></h3><p translation-result="on">模板<em>引用</em>变量（<code>#phone</code>）与模板<em>输入</em>变量（<code>let phone</code>）不同，例如 <a href="guide/template-syntax#template-input-variable"><code>*ngFor</code></a>中。欲知详情，请参见<a href="guide/structural-directives#template-input-variable"><em>结构型指令</em></a> 。</p><p translation-origin="off">A template <em>reference</em> variable (<code>#phone</code>) is not the same as a template <em>input</em> variable (<code>let phone</code>) such as in an <a href="guide/template-syntax#template-input-variable"><code>*ngFor</code></a>. See <a href="guide/structural-directives#template-input-variable"><em>Structural Directives</em></a> for more information.</p><p translation-result="on">模板引用变量的范围是整个模板。因此，不要在同一模板中多次定义相同的变量名，因为它在运行时的值将不可预测。</p><p translation-origin="off">The scope of a reference variable is the entire template. So, don't define the same variable name more than once in the same template as the runtime value will be unpredictable.</p><h4 id="alternative-syntax" translation-result="on">替代语法<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#alternative-syntax"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="alternative-syntax">Alternative syntax<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#alternative-syntax"><i class="material-icons">link</i></a></h4><p translation-result="on">你也可以用 <code>ref-</code> 前缀代替 <code>#</code>。 下面的例子中就用把 <code>fax</code> 变量声明成了 <code>ref-fax</code> 而不是 <code>#fax</code>。</p><p translation-origin="off">You can use the <code>ref-</code> prefix alternative to <code>#</code>. This example declares the <code>fax</code> variable as <code>ref-fax</code> instead of <code>#fax</code>.</p><code-example path="template-reference-variables/src/app/app.component.html" region="ref-fax" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;input ref-fax placeholder="fax number" /&gt; &lt;button (click)="callFax(fax.value)"&gt;Fax&lt;/button&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">ref-fax</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"fax number"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"callFax(fax.value)"</span><span class="tag">&gt;</span><span class="pln">Fax</span><span class="tag">&lt;/button&gt;</span></code>
    </pre></aio-code></code-example><hr><a id="inputs-outputs"></a><h2 id="input-and-output-properties" translation-result="on">输入和输出属性<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#input-and-output-properties"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="input-and-output-properties"><code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> and <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> properties<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#input-and-output-properties"><i class="material-icons">link</i></a></h2><p translation-result="on"><code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 和 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 允许 Angular 在其父上下文和子指令或组件之间共享数据。<code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 属性是可写的，而 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 属性是可观察对象。</p><p translation-origin="off"><code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> and <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> allow Angular to share data between the parent context and child directives or components. An <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> property is writable while an <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> property is observable.</p><p translation-result="on">考虑以下父子关系示例：</p><p translation-origin="off">Consider this example of a child/parent relationship:</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;parent-component&gt; &lt;child-component&gt;&lt;/child-component&gt; &lt;/parent-component&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;parent-component&gt;</span><span class="pln">
  </span><span class="tag">&lt;child-component&gt;&lt;/child-component&gt;</span><span class="pln">
</span><span class="tag">&lt;/parent-component&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">在这里，<code>&lt;child-component&gt;</code> 选择器或子指令嵌入在 <code>&lt;parent-component&gt;</code> 中，用作子级上下文。</p><p translation-origin="off">Here, the <code>&lt;child-component&gt;</code> selector, or child directive, is embedded within a <code>&lt;parent-component&gt;</code>, which serves as the child's context.</p><p translation-result="on"><code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 和 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 充当子组件的 API 或应用编程接口，因为它们允许子组件与父组件进行通信。可以把 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 和 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 看做港口或门，<code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 是进入组件的门，允许数据流入，而 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 是离开组件的门，允许子组件向外发出数据。</p><p translation-origin="off"><code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> and <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> act as the API, or application programming interface, of the child component in that they allow the child to communicate with the parent. Think of <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> and <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> like ports or doorways—<code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> is the doorway into the component allowing data to flow in while <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> is the doorway out of the component, allowing the child component to send data out.</p><p translation-result="on">关于 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 和 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 这一部分有其自己的<live-example name="inputs-outputs" ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="现场演练" href="generated/live-examples/inputs-outputs/stackblitz.html">现场演练</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/inputs-outputs/inputs-outputs.zip">下载范例</a></span></span></span></live-example>。以下小节将重点介绍示例应用程序中的关键点。</p><p translation-origin="off">This section about <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> and <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> has its own<live-example name="inputs-outputs" ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="现场演练" href="generated/live-examples/inputs-outputs/stackblitz.html">现场演练</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/inputs-outputs/inputs-outputs.zip">下载范例</a></span></span></span></live-example>. The following subsections highlight key points in the sample app.</p><div class="alert is-helpful"><h4 id="input-and-output-are-independent" translation-result="on"><code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 和 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 是独立的<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#input-and-output-are-independent"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="input-and-output-are-independent"><code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> and <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> are independent<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#input-and-output-are-independent"><i class="material-icons">link</i></a></h4><p translation-result="on">尽管 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 和 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 通常在应用程序中同时出现，但是您可以单独使用它们。如果嵌套组件只需要向其父级发送数据，则不需要 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> ，而只需 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code>。反之亦然，如果子级只需要从父级接收数据，则只需要 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code>。</p><p translation-origin="off">Though <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> and <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> often appear together in apps, you can use them separately. If the nested component is such that it only needs to send data to its parent, you wouldn't need an <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code>, only an <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code>. The reverse is also true in that if the child only needs to receive data from the parent, you'd only need <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code>.</p></div><a id="input"></a><h2 id="how-to-use-input" translation-result="on">如何使用 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#how-to-use-input"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="how-to-use-input">How to use <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#how-to-use-input"><i class="material-icons">link</i></a></h2><p translation-result="on">在子组件或指令中使用 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 装饰器，可以让 Angular 知道该组件中的属性可以从其父组件中接收值。这很好记，因为这种数据流是从子组件的角度来看就是输入。因此，<code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 允许将数据从父组件输入<em>到</em>子组件中。</p><p translation-origin="off">Use the <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> decorator in a child component or directive to let Angular know that a property in that component can receive its value from its parent component. It helps to remember that the data flow is from the perspective of the child component. So an <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> allows data to be input <em>into</em> the child component from the parent component.</p><div class="lightbox"><img src="generated/images/guide/inputs-outputs/input.svg" alt="Input data flow diagram" width="671" height="346"></div><p translation-result="on">为了说明 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 的用法，请编辑应用程序的以下部分：</p><p translation-origin="off">To illustrate the use of <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code>, edit these parts of your app:</p><ul><li><p translation-result="on">子组件类及其模板</p><p translation-origin="off">The child component class and template</p></li><li><p translation-result="on">父组件类及其模板</p><p translation-origin="off">The parent component class and template</p></li></ul><h3 id="in-the-child" translation-result="on">在子组件中<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#in-the-child"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="in-the-child">In the child<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#in-the-child"><i class="material-icons">link</i></a></h3><p translation-result="on">要在子组件类中使用 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 装饰器，请首先导入 <code><a href="api/core/Input" class="code-anchor">Input</a></code> ，然后使用 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 来装饰一个属性：</p><p translation-origin="off">To use the <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> decorator in a child component class, first import <code><a href="api/core/Input" class="code-anchor">Input</a></code> and then decorate the property with <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code>:</p><code-example path="inputs-outputs/src/app/item-detail/item-detail.component.ts" region="use-input" header="src/app/item-detail/item-detail.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a>, <a href="api/core/Input" class="code-anchor">Input</a> } from '@angular/core'; // <a href="" class="code-anchor">First</a>, import <a href="api/core/Input" class="code-anchor">Input</a> export class ItemDetailComponent { @<a href="api/core/Input" class="code-anchor">Input</a>() <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>: string; // decorate the property with @<a href="api/core/Input" class="code-anchor">Input</a>() }</div><header class="ng-star-inserted">src/app/item-detail/item-detail.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/item-detail/item-detail.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/Input" class="code-anchor"><span class="typ">Input</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln"> </span><span class="com">// </span><a href="" class="code-anchor"><span class="com">First</span></a><span class="com">, import </span><a href="api/core/Input" class="code-anchor"><span class="com">Input</span></a><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">ItemDetailComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="lit">@</span><a href="api/core/Input" class="code-anchor"><span class="lit">Input</span></a><span class="pun">()</span><span class="pln"> </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="pln">item</span></a><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln"> </span><span class="com">// decorate the property with @</span><a href="api/core/Input" class="code-anchor"><span class="com">Input</span></a><span class="com">()</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">在这个例子中，<code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 装饰具有 <code>string</code> 类型的属性 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> ，但是，<code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 属性可以具有任何类型，例如 <code><a href="api/common/DecimalPipe" class="code-anchor">number</a></code> ， <code>string</code> ， <code>boolean</code> 或 <code>object</code>。 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 的值会来自下一部分要介绍的父组件。</p><p translation-origin="off">In this case, <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> decorates the property <code class="no-auto-link">item</code>, which has a type of <code>string</code>, however, <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> properties can have any type, such as <code><a href="api/common/DecimalPipe" class="code-anchor">number</a></code>, <code>string</code>, <code>boolean</code>, or <code>object</code>. The value for <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> will come from the parent component, which the next section covers.</p><p translation-result="on">接下来，在子组件模板中，添加以下内容：</p><p translation-origin="off">Next, in the child component template, add the following:</p><code-example path="inputs-outputs/src/app/item-detail/item-detail.component.html" region="property-in-template" header="src/app/item-detail/item-detail.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;p&gt; Today's <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>: {{<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>}} &lt;/p&gt;</div><header class="ng-star-inserted">src/app/item-detail/item-detail.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/item-detail/item-detail.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;p&gt;</span><span class="pln">
  Today's </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="pln">item</span></a><span class="pln">: {{</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="pln">item</span></a><span class="pln">}}
</span><span class="tag">&lt;/p&gt;</span></code>
    </pre></aio-code></code-example><h3 id="in-the-parent" translation-result="on">在父组件中<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#in-the-parent"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="in-the-parent">In the parent<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#in-the-parent"><i class="material-icons">link</i></a></h3><p translation-result="on">下一步是在父组件的模板中绑定该属性。在此示例中，父组件模板是 <code>app.component.html</code> 。</p><p translation-origin="off">The next step is to bind the property in the parent component's template. In this example, the parent component template is <code>app.component.html</code>.</p><p translation-result="on">首先，使用子组件的选择器（这里是 <code>&lt;app-item-detail&gt;</code> ）作为父组件模板中的指令。然后，使用<a href="guide/template-syntax#property-binding">属性绑定</a>将子组件中的属性绑定到父组件中的属性。</p><p translation-origin="off">First, use the child's selector, here <code>&lt;app-item-detail&gt;</code>, as a directive within the parent component template. Then, use <a href="guide/template-syntax#property-binding">property binding</a> to bind the property in the child to the property of the parent.</p><code-example path="inputs-outputs/src/app/app.component.html" region="input-parent" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;app-item-detail [<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>]="currentItem"&gt;&lt;/app-item-detail&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;app-item-detail</span><span class="pln"> [</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atn">item</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"currentItem"</span><span class="tag">&gt;&lt;/app-item-detail&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">接下来，在父组件类 <code>app.component.ts</code> 中，为 <code>currentItem</code> 指定一个值：</p><p translation-origin="off">Next, in the parent component class, <code>app.component.ts</code>, designate a value for <code>currentItem</code>:</p><code-example path="inputs-outputs/src/app/app.component.ts" region="parent-property" header="src/app/app.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">export class AppComponent { currentItem = 'Television'; }</div><header class="ng-star-inserted">src/app/app.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  currentItem </span><span class="pun">=</span><span class="pln"> </span><span class="str">'Television'</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">借助 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> ，Angular 将 <code>currentItem</code> 的值传给子级，以便该 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 渲染为 <code>Television</code> 。</p><p translation-origin="off">With <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code>, Angular passes the value for <code>currentItem</code> to the child so that <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> renders as <code>Television</code>.</p><p translation-result="on">下图显示了这种结构：</p><p translation-origin="off">The following diagram shows this structure:</p><div class="lightbox"><img src="generated/images/guide/inputs-outputs/input-diagram-target-source.svg" alt="Property binding diagram" width="502" height="304"></div><p translation-result="on">方括号 <code>[]</code> 中的目标是子组件中带有 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 装饰器的属性。绑定源（等号右边的部分）是父组件要传给内嵌组件的数据。</p><p translation-origin="off">The target in the square brackets, <code>[]</code>, is the property you decorate with <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> in the child component. The binding source, the part to the right of the equal sign, is the data that the parent component passes to the nested component.</p><p translation-result="on">关键是，当要在父组件中绑定到子组件中的属性（即方括号中的内容）时，必须在子组件中使用 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 来装饰该属性。</p><p translation-origin="off">The key takeaway is that when binding to a child component's property in a parent component—that is, what's in square brackets—you must decorate the property with <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> in the child component.</p><div class="alert is-helpful"><h4 id="onchanges-and-input" translation-result="on"><code><a href="api/core/OnChanges" class="code-anchor">OnChanges</a></code> 和 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#onchanges-and-input"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="onchanges-and-input"><code><a href="api/core/OnChanges" class="code-anchor">OnChanges</a></code> and <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#onchanges-and-input"><i class="material-icons">link</i></a></h4><p translation-result="on">要监视 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 属性的更改，请使用 Angular 的<a href="guide/lifecycle-hooks#onchanges">生命周期钩子</a>之一 <code><a href="api/core/OnChanges" class="code-anchor">OnChanges</a></code> 。 <code><a href="api/core/OnChanges" class="code-anchor">OnChanges</a></code> 是专门设计用于具有 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 装饰器的属性的。欲知详情，请参见<a href="guide/lifecycle-hooks">生命周期钩子</a>指南的<a href="guide/lifecycle-hooks#onchanges"><code>OnChanges</code></a>部分。</p><p translation-origin="off">To watch for changes on an <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> property, use <code><a href="api/core/OnChanges" class="code-anchor">OnChanges</a></code>, one of Angular's <a href="guide/lifecycle-hooks#onchanges">lifecycle hooks</a>. <code><a href="api/core/OnChanges" class="code-anchor">OnChanges</a></code> is specifically designed to work with properties that have the <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> decorator. See the <a href="guide/lifecycle-hooks#onchanges"><code>OnChanges</code></a>section of the <a href="guide/lifecycle-hooks">Lifecycle Hooks</a> guide for more details and examples.</p></div><a id="output"></a><h2 id="how-to-use-output" translation-result="on">如何使用 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#how-to-use-output"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="how-to-use-output">How to use <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#how-to-use-output"><i class="material-icons">link</i></a></h2><p translation-result="on">在子组件或指令中使用 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 装饰器，允许数据从子级<em>流出</em>到父级。</p><p translation-origin="off">Use the <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> decorator in the child component or directive to allow data to flow from the child <em>out</em> to the parent.</p><p translation-result="on">通常应将 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 属性初始化为 Angular <a href="api/core/EventEmitter"><code>EventEmitter</code></a>，并将值作为<a href="guide/template-syntax#event-binding">事件</a>从组件中向外流出。</p><p translation-origin="off">An <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> property should normally be initialized to an Angular <a href="api/core/EventEmitter"><code>EventEmitter</code></a>with values flowing out of the component as <a href="guide/template-syntax#event-binding">events</a>.</p><div class="lightbox"><img src="generated/images/guide/inputs-outputs/output.svg" alt="Output diagram" width="666" height="340"></div><p translation-result="on">就像 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 一样，您也要在子组件的属性上使用 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> ，但其类型为 <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code> 。</p><p translation-origin="off">Just like with <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code>, you can use <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> on a property of the child component but its type should be <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code>.</p><p translation-result="on"><code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 将子组件中的属性标记为一扇门，数据可以通过这扇门从子组件传到父组件。 然后，子组件必须引发一个事件，以便父组件知道发生了某些变化。为了引发事件，<code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 要和 <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code> 配合使用，<code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code> 是 <code>@angular/core</code> 中的一个类，用于发出自定义事件。</p><p translation-origin="off"><code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> marks a property in a child component as a doorway through which data can travel from the child to the parent. The child component then has to raise an event so the parent knows something has changed. To raise an event, <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> works hand in hand with <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code>, which is a class in <code>@angular/core</code> that you use to emit custom events.</p><p translation-result="on">要使用 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> ，请编辑应用程序的以下部分：</p><p translation-origin="off">When you use <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code>, edit these parts of your app:</p><ul><li><p translation-result="on">子组件类及其模板</p><p translation-origin="off">The child component class and template</p></li><li><p translation-result="on">父组件类及其模板</p><p translation-origin="off">The parent component class and template</p></li></ul><p translation-result="on">下面的示例演示了如何在子组件中设置 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> ，以将您在 HTML 的 <code>&lt;input&gt;</code> 中输入数据，并将其追加到父组件中的数组里。</p><p translation-origin="off">The following example shows how to set up an <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> in a child component that pushes data you enter in an HTML <code>&lt;input&gt;</code> to an array in the parent component.</p><div class="alert is-helpful"><p translation-result="on">HTML 元素 <code>&lt;input&gt;</code> 和 Angular 装饰器 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 是不同的。本文档是讲 Angular 中的组件通信的，因此讲的是 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 和 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code>。关于 HTML 元素 <code>&lt;input&gt;</code> 的更多信息，请参见 <a href="https://www.w3.org/TR/html5/sec-forms.html#the-input-element">W3C Recommendation</a> 。</p><p translation-origin="off">The HTML element <code>&lt;input&gt;</code> and the Angular decorator <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> are different. This documentation is about component communication in Angular as it pertains to <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> and <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code>. For more information on the HTML element <code>&lt;input&gt;</code>, see the <a href="https://www.w3.org/TR/html5/sec-forms.html#the-input-element">W3C Recommendation</a>.</p></div><h3 id="in-the-child-1" translation-result="on">在子组件中<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#in-the-child-1"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="in-the-child-1">In the child<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#in-the-child-1"><i class="material-icons">link</i></a></h3><p translation-result="on">此示例有一个 <code>&lt;input&gt;</code> ，用户可以在其中输入一个值并单击引发事件的 <code>&lt;button&gt;</code> 。然后，通过 <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code> 将数据转给父组件。</p><p translation-origin="off">This example features an <code>&lt;input&gt;</code> where a user can enter a value and click a <code>&lt;button&gt;</code> that raises an event. The <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code> then relays the data to the parent component.</p><p translation-result="on">首先，请确保在子组件类中导入 <code><a href="api/core/Output" class="code-anchor">Output</a></code> 和 <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code> ：</p><p translation-origin="off">First, be sure to import <code><a href="api/core/Output" class="code-anchor">Output</a></code> and <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code> in the child component class:</p><code-example language="js" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Output" class="code-anchor">Output</a>, <a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a> } from '@angular/core';</div><aio-code><pre class="lang-js prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Output" class="code-anchor"><span class="typ">Output</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/EventEmitter" class="code-anchor"><span class="typ">EventEmitter</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> from </span><span class="str">'@angular/core'</span><span class="pun">;</span></code>
    </pre></aio-code></code-example><p translation-result="on">接下来，仍然在子组件中，使用组件类中的 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 装饰属性。下面例子中的 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 名叫 <code>newItemEvent</code> ，其类型是 <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code> ，这表示它是一个事件。</p><p translation-origin="off">Next, still in the child, decorate a property with <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> in the component class. The following example <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> is called <code>newItemEvent</code> and its type is <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code>, which means it's an event.</p><code-example path="inputs-outputs/src/app/item-output/item-output.component.ts" region="item-output" header="src/app/item-output/item-output.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/Output" class="code-anchor">Output</a>() newItemEvent = new <a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a>&lt;string&gt;();</div><header class="ng-star-inserted">src/app/item-output/item-output.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/item-output/item-output.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/Output" class="code-anchor"><span class="lit">Output</span></a><span class="pun">()</span><span class="pln"> newItemEvent </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/core/EventEmitter" class="code-anchor"><span class="typ">EventEmitter</span></a><span class="str">&lt;string&gt;</span><span class="pun">();</span></code>
    </pre></aio-code></code-example><p translation-result="on">上述声明的不同之处如下：</p><p translation-origin="off">The different parts of the above declaration are as follows:</p><ul><li><p translation-result="on"><code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> —— 一个装饰器函数，它将该属性标记为把数据从子级传递到父级的一种方式</p><p translation-origin="off"><code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code>—a decorator function marking the property as a way for data to go from the child to the parent</p></li><li><p translation-result="on"><code>newItemEvent</code> — <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 的名字</p><p translation-origin="off"><code>newItemEvent</code>—the name of the <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code></p></li><li><p translation-result="on"><code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a>&lt;string&gt;</code> — <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 的类型</p><p translation-origin="off"><code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a>&lt;string&gt;</code>—the <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code>'s type</p></li><li><p translation-result="on"><code>new <a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a>&lt;string&gt;()</code> 告诉 Angular 创建一个新的事件发射器，并且它发射的数据为 <code>string</code> 类型。该类型也可以是任何类型，例如 <code><a href="api/common/DecimalPipe" class="code-anchor">number</a></code> ， <code>boolean</code> 等。有关 <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code> 的更多信息，请参阅 <a href="api/core/EventEmitter">EventEmitter API 文档</a> 。</p><p translation-origin="off"><code>new <a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a>&lt;string&gt;()</code>—tells Angular to create a new event emitter and that the data it emits is of type string. The type could be any type, such as <code><a href="api/common/DecimalPipe" class="code-anchor">number</a></code>, <code>boolean</code>, and so on. For more information on <code><a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a></code>, see the <a href="api/core/EventEmitter">EventEmitter API documentation</a>.</p></li></ul><p translation-result="on">接下来，在同一个组件类中创建一个 <code>addNewItem()</code> 方法：</p><p translation-origin="off">Next, create an <code>addNewItem()</code> method in the same component class:</p><code-example path="inputs-outputs/src/app/item-output/item-output.component.ts" region="item-output-class" header="src/app/item-output/item-output.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">export class ItemOutputComponent { @<a href="api/core/Output" class="code-anchor">Output</a>() newItemEvent = new <a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a>&lt;string&gt;(); addNewItem(value: string) { this.newItemEvent.emit(value); } }</div><header class="ng-star-inserted">src/app/item-output/item-output.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/item-output/item-output.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">ItemOutputComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">

  </span><span class="lit">@</span><a href="api/core/Output" class="code-anchor"><span class="lit">Output</span></a><span class="pun">()</span><span class="pln"> newItemEvent </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/core/EventEmitter" class="code-anchor"><span class="typ">EventEmitter</span></a><span class="str">&lt;string&gt;</span><span class="pun">();</span><span class="pln">

  addNewItem</span><span class="pun">(</span><span class="kwd">value</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">newItemEvent</span><span class="pun">.</span><span class="pln">emit</span><span class="pun">(</span><span class="kwd">value</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on"><code>addNewItem()</code> 函数使用 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> <code>newItemEvent</code> 引发一个事件，在该事件中它将发出用户键入到 <code>&lt;input&gt;</code> 中的内容。换句话说，当用户单击 UI 中的 “Add” 按钮时，子组件会让父组件知道该事件，并将该数据传给父组件。</p><p translation-origin="off">The <code>addNewItem()</code> function uses the <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code>, <code>newItemEvent</code>, to raise an event in which it emits the value the user types into the <code>&lt;input&gt;</code>. In other words, when the user clicks the add button in the UI, the child lets the parent know about the event and gives that data to the parent.</p><h4 id="in-the-childs-template" translation-result="on">在子组件的模板中<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#in-the-childs-template"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="in-the-childs-template">In the child's template<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#in-the-childs-template"><i class="material-icons">link</i></a></h4><p translation-result="on">子组件的模板中有两个控件。第一个是带有<a href="guide/template-syntax#ref-var">模板引用变量</a> <code>#newItem</code> 的 HTML <code>&lt;input&gt;</code> ，用户可在其中键入条目名称。用户键入到 <code>&lt;input&gt;</code> 中的内容都存储在 <code>#newItem</code> 变量中。</p><p translation-origin="off">The child's template has two controls. The first is an HTML <code>&lt;input&gt;</code> with a <a href="guide/template-syntax#ref-var">template reference variable</a> , <code>#newItem</code>, where the user types in an item name. Whatever the user types into the <code>&lt;input&gt;</code> gets stored in the <code>#newItem</code> variable.</p><code-example path="inputs-outputs/src/app/item-output/item-output.component.html" region="child-output" header="src/app/item-output/item-output.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;label&gt;Add an <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>: &lt;input #newItem&gt;&lt;/label&gt; &lt;button (click)="addNewItem(newItem.value)"&gt;Add to parent's list&lt;/button&gt;</div><header class="ng-star-inserted">src/app/item-output/item-output.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/item-output/item-output.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;label&gt;</span><span class="pln">Add an </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="pln">item</span></a><span class="pln">: </span><span class="tag">&lt;input</span><span class="pln"> #</span><span class="atn">newItem</span><span class="tag">&gt;&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"addNewItem(newItem.value)"</span><span class="tag">&gt;</span><span class="pln">Add to parent's list</span><span class="tag">&lt;/button&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">第二个元素是带有<a href="guide/template-syntax#event-binding">事件绑定</a>的 <code>&lt;button&gt;</code>。之所以知道这是事件绑定，是因为等号的左侧部分在圆括号中 <code>(click)</code> 。</p><p translation-origin="off">The second element is a <code>&lt;button&gt;</code> with an <a href="guide/template-syntax#event-binding">event binding</a>. You know it's an event binding because the part to the left of the equal sign is in parentheses, <code>(click)</code>.</p><p translation-result="on"><code>(click)</code> 事件绑定到子组件类中的 <code>addNewItem()</code> 方法，无论 <code>#newItem</code> 的值如何，该子组件类均将其作为参数。</p><p translation-origin="off">The <code>(click)</code> event is bound to the <code>addNewItem()</code> method in the child component class which takes as its argument whatever the value of <code>#newItem</code> is.</p><p translation-result="on">现在，子组件已经有了用于将数据发送到父组件的 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 和引发事件的方法。下一步是在父组件中。</p><p translation-origin="off">Now the child component has an <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> for sending data to the parent and a method for raising an event. The next step is in the parent.</p><h3 id="in-the-parent-1" translation-result="on">在父组件中<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#in-the-parent-1"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="in-the-parent-1">In the parent<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#in-the-parent-1"><i class="material-icons">link</i></a></h3><p translation-result="on">在此示例中，父组件是 <code>AppComponent</code> ，但是您可以使用任何能嵌套子组件的组件。</p><p translation-origin="off">In this example, the parent component is <code>AppComponent</code>, but you could use any component in which you could nest the child.</p><p translation-result="on">此示例中的 <code>AppComponent</code> 具有数组型的 <code>items</code> 列表以及将更多条目添加到数组中的方法。</p><p translation-origin="off">The <code>AppComponent</code> in this example features a list of <code>items</code> in an array and a method for adding more items to the array.</p><code-example path="inputs-outputs/src/app/app.component.ts" region="add-new-item" header="src/app/app.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">export class AppComponent { items = ['item1', 'item2', 'item3', 'item4']; addItem(newItem: string) { this.items.push(newItem); } }</div><header class="ng-star-inserted">src/app/app.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  items </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="str">'item1'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'item2'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'item3'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'item4'</span><span class="pun">];</span><span class="pln">

  addItem</span><span class="pun">(</span><span class="pln">newItem</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">items</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln">newItem</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on"><code>addItem()</code> 方法接收字符串形式的参数，然后将该字符串添加到 <code>items</code> 数组中。</p><p translation-origin="off">The <code>addItem()</code> method takes an argument in the form of a string and then pushes, or adds, that string to the <code>items</code> array.</p><h4 id="in-the-parents-template" translation-result="on">在父组件的模板中<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#in-the-parents-template"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="in-the-parents-template">In the parent's template<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#in-the-parents-template"><i class="material-icons">link</i></a></h4><p translation-result="on">接下来，在父组件的模板中，将父组件的方法绑定到子组件的事件。将子组件选择器（这里是 <code>&lt;app-item-output&gt;</code>）放在父组件的模板 <code>app.component.html</code> 中。</p><p translation-origin="off">Next, in the parent's template, bind the parent's method to the child's event. Put the child selector, here <code>&lt;app-item-output&gt;</code>, within the parent component's template, <code>app.component.html</code>.</p><code-example path="inputs-outputs/src/app/app.component.html" region="output-parent" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;app-item-output (newItemEvent)="addItem($event)"&gt;&lt;/app-item-output&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;app-item-output</span><span class="pln"> (</span><span class="atn">newItemEvent</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"addItem($event)"</span><span class="tag">&gt;&lt;/app-item-output&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">事件绑定 <code>(newItemEvent)='addItem($event)'</code> 告诉 Angular 将子组件的 <code>newItemEvent</code> 事件连接到父组件中的方法 <code>addItem()</code> ，以及将子组件通知父组件的事件作为 <code>addItem()</code> 的参数。换句话说，这是实际传递数据的地方。<code>$event</code> 包含用户在子模板 UI 中键入到 <code>&lt;input&gt;</code> 中的数据。</p><p translation-origin="off">The event binding, <code>(newItemEvent)='addItem($event)'</code>, tells Angular to connect the event in the child, <code>newItemEvent</code>, to the method in the parent, <code>addItem()</code>, and that the event that the child is notifying the parent about is to be the argument of <code>addItem()</code>. In other words, this is where the actual hand off of data takes place. The <code>$event</code> contains the data that the user types into the <code>&lt;input&gt;</code> in the child template UI.</p><p translation-result="on">现在，为了查看 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 工作情况，请将以下内容添加到父组件的模板中：</p><p translation-origin="off">Now, in order to see the <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> working, add the following to the parent's template:</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;ul&gt; &lt;li *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a> of items"&gt; {{<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>}} &lt;/li&gt; &lt;/ul&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;ul&gt;</span><span class="pln">

  </span><span class="tag">&lt;li</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atv">item</span></a><span class="atv"> of items"</span><span class="tag">&gt;</span><span class="pln">

      {{</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="pln">item</span></a><span class="pln">}}

  </span><span class="tag">&lt;/li&gt;</span><span class="pln">

</span><span class="tag">&lt;/ul&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on"><code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> 会遍历 <code>items</code> 数组中的条目。当您在子组件的 <code>&lt;input&gt;</code> 中输入值并单击按钮时，子组件将发出事件，父组件的 <code>addItem()</code> 方法将值推送到 <code>items</code> 数组，并将其呈现在列表中。</p><p translation-origin="off">The <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> iterates over the items in the <code>items</code> array. When you enter a value in the child's <code>&lt;input&gt;</code> and click the button, the child emits the event and the parent's <code>addItem()</code> method pushes the value to the <code>items</code> array and it renders in the list.</p><h2 id="input-and-output-together" translation-result="on"><code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 和 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 在一起<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#input-and-output-together"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="input-and-output-together"><code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> and <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> together<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#input-and-output-together"><i class="material-icons">link</i></a></h2><p translation-result="on">您可以在和下面代码相同的子组件上使用 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 和 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> ：</p><p translation-origin="off">You can use <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> and <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> on the same child component as in the following:</p><code-example path="inputs-outputs/src/app/app.component.html" region="together" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;app-input-output [<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>]="currentItem" (deleteRequest)="crossOffItem($event)"&gt;&lt;/app-input-output&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;app-input-output</span><span class="pln"> [</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atn">item</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"currentItem"</span><span class="pln"> (</span><span class="atn">deleteRequest</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"crossOffItem($event)"</span><span class="tag">&gt;&lt;/app-input-output&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">目标 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 是子组件类中的 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 属性，它从父组件的属性 <code>currentItem</code> 中接收值。当您单击删除时，子组件将引发事件 <code>deleteRequest</code> ，它携带的值将作为父组件的 <code>crossOffItem()</code> 方法的参数。</p><p translation-origin="off">The target, <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code>, which is an <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> property in the child component class, receives its value from the parent's property, <code>currentItem</code>. When you click delete, the child component raises an event, <code>deleteRequest</code>, which is the argument for the parent's <code>crossOffItem()</code> method.</p><p translation-result="on">下图是同一子组件上的 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 和 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> ，并显示了每个子组件的不同部分：</p><p translation-origin="off">The following diagram is of an <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> and an <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> on the same child component and shows the different parts of each:</p><div class="lightbox"><img src="generated/images/guide/inputs-outputs/input-output-diagram.svg" alt="Input/Output diagram" width="800" height="333"></div><p translation-result="on">如图所示，像分别使用它们那样同时使用输入和输出。在这里，子选择器是 <code>&lt;app-input-output&gt;</code>，其中 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 和 <code>deleteRequest</code> 是子组件类中的 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 和 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 属性。属性 <code>currentItem</code> 和方法 <code>crossOffItem()</code> 都位于父组件类中。</p><p translation-origin="off">As the diagram shows, use inputs and outputs together in the same manner as using them separately. Here, the child selector is <code>&lt;app-input-output&gt;</code> with <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> and <code>deleteRequest</code> being <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> and <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> properties in the child component class. The property <code>currentItem</code> and the method <code>crossOffItem()</code> are both in the parent component class.</p><p translation-result="on">要使用“盒子里的香蕉”语法 <code>[()]</code> 组合属性和事件绑定，请参见<a href="guide/template-syntax#two-way">双向绑定</a> 。</p><p translation-origin="off">To combine property and event bindings using the banana-in-a-box syntax, <code>[()]</code>, see <a href="guide/template-syntax#two-way">Two-way Binding</a>.</p><p translation-result="on">关于这些工作原理的更多详细信息，请参见前面有关 <a href="guide/template-syntax#input">Input</a> 和 <a href="guide/template-syntax#output">Output 的部分</a> 。要查看实际效果，参见<live-example name="inputs-outputs" ng-version="9.0.0-rc.11"><span style="display:none">输入和输出范例</span><span><span class="ng-star-inserted"><a target="_blank" title="输入和输出范例" href="generated/live-examples/inputs-outputs/stackblitz.html">输入和输出范例</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/inputs-outputs/inputs-outputs.zip">下载范例</a></span></span></span></live-example>。</p><p translation-origin="off">For more detail on how these work, see the previous sections on <a href="guide/template-syntax#input">Input</a> and <a href="guide/template-syntax#output">Output</a>. To see it in action, see the<live-example name="inputs-outputs" ng-version="9.0.0-rc.11"><span style="display:none">Inputs and Outputs Example</span><span><span class="ng-star-inserted"><a target="_blank" title="Inputs and Outputs Example" href="generated/live-examples/inputs-outputs/stackblitz.html">Inputs and Outputs Example</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/inputs-outputs/inputs-outputs.zip">下载范例</a></span></span></span></live-example>.</p><h2 id="input-and-output-declarations" translation-result="on"><code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 和 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 声明<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#input-and-output-declarations"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="input-and-output-declarations"><code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> and <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> declarations<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#input-and-output-declarations"><i class="material-icons">link</i></a></h2><p translation-result="on">您还可以在指令元数据的 <code>inputs</code> 和 <code>outputs</code> 数组中标出这些成员，而不是使用 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 和 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 装饰器来声明输入和输出，如本例所示：</p><p translation-origin="off">Instead of using the <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> and <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> decorators to declare inputs and outputs, you can identify members in the <code>inputs</code> and <code>outputs</code> arrays of the directive metadata, as in this example:</p><code-example path="inputs-outputs/src/app/in-the-metadata/in-the-metadata.component.ts" region="metadata" header="src/app/in-the-metadata/in-the-metadata.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">// tslint:disable: no-inputs-metadata-property no-outputs-metadata-property inputs: ['clearanceItem'], outputs: ['buyEvent'] // tslint:enable: no-inputs-metadata-property no-outputs-metadata-property</div><header class="ng-star-inserted">src/app/in-the-metadata/in-the-metadata.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/in-the-metadata/in-the-metadata.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">// tslint:disable: no-inputs-metadata-property no-outputs-metadata-property</span><span class="pln">
inputs</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'clearanceItem'</span><span class="pun">],</span><span class="pln">
outputs</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'buyEvent'</span><span class="pun">]</span><span class="pln">
</span><span class="com">// tslint:enable: no-inputs-metadata-property no-outputs-metadata-property</span></code>
    </pre></aio-code></code-example><p translation-result="on">固然可以在 <code>@<a href="api/core/Directive" class="code-anchor">Directive</a></code> 和 <code>@<a href="api/core/Component" class="code-anchor">Component</a></code> 元数据中声明 <code>inputs</code> 和 <code>outputs</code> ，但最好使用 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> 和 <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 类修饰符，如下所示：</p><p translation-origin="off">While declaring <code>inputs</code> and <code>outputs</code> in the <code>@<a href="api/core/Directive" class="code-anchor">Directive</a></code> and <code>@<a href="api/core/Component" class="code-anchor">Component</a></code> metadata is possible, it is a better practice to use the <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> and <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> class decorators instead, as follows:</p><code-example path="inputs-outputs/src/app/input-output/input-output.component.ts" region="input-output" header="src/app/input-output/input-output.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/Input" class="code-anchor">Input</a>() <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>: string; @<a href="api/core/Output" class="code-anchor">Output</a>() deleteRequest = new <a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a>&lt;string&gt;();</div><header class="ng-star-inserted">src/app/input-output/input-output.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/input-output/input-output.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/Input" class="code-anchor"><span class="lit">Input</span></a><span class="pun">()</span><span class="pln"> </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="pln">item</span></a><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln">
</span><span class="lit">@</span><a href="api/core/Output" class="code-anchor"><span class="lit">Output</span></a><span class="pun">()</span><span class="pln"> deleteRequest </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/core/EventEmitter" class="code-anchor"><span class="typ">EventEmitter</span></a><span class="str">&lt;string&gt;</span><span class="pun">();</span></code>
    </pre></aio-code></code-example><p translation-result="on">欲知详情，请参见<a href="guide/styleguide">风格指南</a>的<a href="guide/styleguide#decorate-input-and-output-properties">给输入和输出属性加装饰器</a>部分。</p><p translation-origin="off">See the <a href="guide/styleguide#decorate-input-and-output-properties">Decorate input and output properties</a> section of the <a href="guide/styleguide">Style Guide</a> for details.</p><div class="alert is-helpful"><p translation-result="on">如果在尝试使用输入或输出时收到了模板解析错误，但是您知道该属性一定存在，请仔细检查您的属性是否使用 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> / <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 进行了注解，或者是否已在 <code>inputs</code> / <code>outputs</code> 数组中声明了它们：</p><p translation-origin="off">If you get a template parse error when trying to use inputs or outputs, but you know that the properties do indeed exist, double check that your properties are annotated with <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> / <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> or that you've declared them in an <code>inputs</code>/<code>outputs</code> array:</p><code-example language="bash" ng-version="9.0.0-rc.11"><div style="display:none">Uncaught Error: Template parse errors: Can't bind to 'item' since it isn't a known property of 'app-item-detail'</div><aio-code><pre class="lang-bash prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="typ">Uncaught</span><span class="pln"> </span><span class="typ">Error</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Template</span><span class="pln"> parse errors</span><span class="pun">:</span><span class="pln">
</span><span class="typ">Can</span><span class="str">'t bind to '</span><span class="pln">item</span><span class="str">' since it isn'</span><span class="pln">t a known property of </span><span class="str">'app-item-detail'</span></code>
    </pre></aio-code></code-example></div><a id="aliasing-io"></a><h2 id="aliasing-inputs-and-outputs" translation-result="on">为输入和输出指定别名<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#aliasing-inputs-and-outputs"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="aliasing-inputs-and-outputs">Aliasing inputs and outputs<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#aliasing-inputs-and-outputs"><i class="material-icons">link</i></a></h2><p translation-result="on">有时，输入/输出属性的公共名称应与内部名称不同。虽然最好的方法是避免这种情况，但 Angular 确实提供了一种解决方案。</p><p translation-origin="off">Sometimes the public name of an input/output property should be different from the internal name. While it is a best practice to avoid this situation, Angular does offer a solution.</p><h3 id="aliasing-in-the-metadata" translation-result="on">元数据中的别名<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#aliasing-in-the-metadata"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="aliasing-in-the-metadata">Aliasing in the metadata<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#aliasing-in-the-metadata"><i class="material-icons">link</i></a></h3><p translation-result="on">要在元数据中为输入和输出指定别名，请使用冒号分隔（<code>:</code>）的字符串，其左边是属性名，右边是别名：</p><p translation-origin="off">Alias inputs and outputs in the metadata using a colon-delimited (<code>:</code>) string with the directive property name on the left and the public alias on the right:</p><code-example path="inputs-outputs/src/app/aliasing/aliasing.component.ts" region="alias" header="src/app/aliasing/aliasing.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">// tslint:disable: no-inputs-metadata-property no-outputs-metadata-property inputs: ['input1: saveForLaterItem'], // propertyName:alias outputs: ['outputEvent1: saveForLaterEvent'] // tslint:disable: no-inputs-metadata-property no-outputs-metadata-property</div><header class="ng-star-inserted">src/app/aliasing/aliasing.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/aliasing/aliasing.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">// tslint:disable: no-inputs-metadata-property no-outputs-metadata-property</span><span class="pln">
inputs</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'input1: saveForLaterItem'</span><span class="pun">],</span><span class="pln"> </span><span class="com">// propertyName:alias</span><span class="pln">
outputs</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'outputEvent1: saveForLaterEvent'</span><span class="pun">]</span><span class="pln">
</span><span class="com">// tslint:disable: no-inputs-metadata-property no-outputs-metadata-property</span></code>
    </pre></aio-code></code-example><h3 id="aliasing-with-the-inputoutput-decorator" translation-result="on">使用 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> / <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 装饰器指定别名<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#aliasing-with-the-inputoutput-decorator"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="aliasing-with-the-inputoutput-decorator">Aliasing with the <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code>/<code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> decorator<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#aliasing-with-the-inputoutput-decorator"><i class="material-icons">link</i></a></h3><p translation-result="on">您可以通过将别名传给 <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code> / <code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> 装饰器来为属性名指定别名。其内部名称保持不变。</p><p translation-origin="off">You can specify the alias for the property name by passing the alias name to the <code>@<a href="api/core/Input" class="code-anchor">Input</a>()</code>/<code>@<a href="api/core/Output" class="code-anchor">Output</a>()</code> decorator. The internal name remains as usual.</p><code-example path="inputs-outputs/src/app/aliasing/aliasing.component.ts" region="alias-input-output" header="src/app/aliasing/aliasing.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/Input" class="code-anchor">Input</a>('wishListItem') input2: string; // @<a href="api/core/Input" class="code-anchor">Input</a>(alias) @<a href="api/core/Output" class="code-anchor">Output</a>('wishEvent') outputEvent2 = new <a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a>&lt;string&gt;(); // @<a href="api/core/Output" class="code-anchor">Output</a>(alias) propertyName = ...</div><header class="ng-star-inserted">src/app/aliasing/aliasing.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/aliasing/aliasing.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/Input" class="code-anchor"><span class="lit">Input</span></a><span class="pun">(</span><span class="str">'wishListItem'</span><span class="pun">)</span><span class="pln"> input2</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln"> </span><span class="com">//  @</span><a href="api/core/Input" class="code-anchor"><span class="com">Input</span></a><span class="com">(alias)</span><span class="pln">
</span><span class="lit">@</span><a href="api/core/Output" class="code-anchor"><span class="lit">Output</span></a><span class="pun">(</span><span class="str">'wishEvent'</span><span class="pun">)</span><span class="pln"> outputEvent2 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/core/EventEmitter" class="code-anchor"><span class="typ">EventEmitter</span></a><span class="str">&lt;string&gt;</span><span class="pun">();</span><span class="pln"> </span><span class="com">//  @</span><a href="api/core/Output" class="code-anchor"><span class="com">Output</span></a><span class="com">(alias) propertyName = ...</span></code>
    </pre></aio-code></code-example><hr><a id="expression-operators"></a><h2 id="template-expression-operators" translation-result="on">模板表达式中的运算符<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#template-expression-operators"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="template-expression-operators">Template expression operators<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#template-expression-operators"><i class="material-icons">link</i></a></h2><p translation-result="on">Angular 模板表达式的语言是 JavaScript 语法的子集，并为特定情况添加了一些特殊的运算符。接下来将介绍其中的三个运算符：</p><p translation-origin="off">The Angular template expression language employs a subset of JavaScript syntax supplemented with a few special operators for specific scenarios. The next sections cover three of these operators:</p><ul><li><p translation-result="on"><a href="guide/template-syntax#pipe">管道</a></p><p translation-origin="off"><a href="guide/template-syntax#pipe">pipe</a></p></li><li><p translation-result="on"><a href="guide/template-syntax#safe-navigation-operator">安全导航运算符</a></p><p translation-origin="off"><a href="guide/template-syntax#safe-navigation-operator">safe navigation operator</a></p></li><li><p translation-result="on"><a href="guide/template-syntax#non-null-assertion-operator">非空断言运算符</a></p><p translation-origin="off"><a href="guide/template-syntax#non-null-assertion-operator">non-null assertion operator</a></p></li></ul><a id="pipe"></a><h3 id="the-pipe-operator-" translation-result="on">管道运算符（ <code>|</code> ）<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#the-pipe-operator-"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="the-pipe-operator-">The pipe operator (<code>|</code>)<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#the-pipe-operator-"><i class="material-icons">link</i></a></h3><p translation-result="on">在准备将其用于绑定之前，表达式的结果可能需要进行一些转换。例如，您可以将数字显示为货币，将文本更改为大写，或过滤列表并对其进行排序。</p><p translation-origin="off">The result of an expression might require some transformation before you're ready to use it in a binding. For example, you might display a number as a currency, change text to uppercase, or filter a list and sort it.</p><p translation-result="on">管道是简单的函数，它们接受输入值并返回转换后的值。使用管道运算符（<code>|</code>），很容易在模板表达式中使用它们：</p><p translation-origin="off">Pipes are simple functions that accept an input value and return a transformed value. They're easy to apply within template expressions, using the pipe operator (<code>|</code>):</p><code-example path="template-expression-operators/src/app/app.component.html" region="uppercase-pipe" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;p&gt;<a href="api/platform-browser/Title" class="code-anchor">Title</a> through uppercase pipe: {{title | <a href="api/common/UpperCasePipe" class="code-anchor">uppercase</a>}}&lt;/p&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;p&gt;</span><a href="api/platform-browser/Title" class="code-anchor"><span class="pln">Title</span></a><span class="pln"> through uppercase pipe: {{title | </span><a href="api/common/UpperCasePipe" class="code-anchor"><span class="pln">uppercase</span></a><span class="pln">}}</span><span class="tag">&lt;/p&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">管道运算符会把它左侧的表达式结果传给它右侧的管道函数。</p><p translation-origin="off">The pipe operator passes the result of an expression on the left to a pipe function on the right.</p><p translation-result="on">还可以通过多个管道串联表达式：</p><p translation-origin="off">You can chain expressions through multiple pipes:</p><code-example path="template-expression-operators/src/app/app.component.html" region="pipe-chain" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;!-- convert title to uppercase, then to lowercase --&gt; &lt;p&gt;<a href="api/platform-browser/Title" class="code-anchor">Title</a> through a pipe chain: {{title | <a href="api/common/UpperCasePipe" class="code-anchor">uppercase</a> | <a href="api/common/LowerCasePipe" class="code-anchor">lowercase</a>}}&lt;/p&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">&lt;!-- convert title to uppercase, then to lowercase --&gt;</span><span class="pln">
</span><span class="tag">&lt;p&gt;</span><a href="api/platform-browser/Title" class="code-anchor"><span class="pln">Title</span></a><span class="pln"> through a pipe chain: {{title | </span><a href="api/common/UpperCasePipe" class="code-anchor"><span class="pln">uppercase</span></a><span class="pln"> | </span><a href="api/common/LowerCasePipe" class="code-anchor"><span class="pln">lowercase</span></a><span class="pln">}}</span><span class="tag">&lt;/p&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">您还可以对管道<a href="guide/pipes#parameterizing-a-pipe">使用参数</a>：</p><p translation-origin="off">And you can also <a href="guide/pipes#parameterizing-a-pipe">apply parameters</a> to a pipe:</p><code-example path="template-expression-operators/src/app/app.component.html" region="date-pipe" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;!-- pipe with configuration argument =&gt; "February 25, 1980" --&gt; &lt;p&gt;Manufacture date with date format pipe: {{item.manufactureDate | <a href="api/common/DatePipe" class="code-anchor">date</a>:'longDate'}}&lt;/p&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">&lt;!-- pipe with configuration argument =&gt; "February 25, 1980" --&gt;</span><span class="pln">
</span><span class="tag">&lt;p&gt;</span><span class="pln">Manufacture date with date format pipe: {{item.manufactureDate | </span><a href="api/common/DatePipe" class="code-anchor"><span class="pln">date</span></a><span class="pln">:'longDate'}}</span><span class="tag">&lt;/p&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on"><code><a href="api/common/JsonPipe" class="code-anchor">json</a></code> 管道对调试绑定特别有用：</p><p translation-origin="off">The <code><a href="api/common/JsonPipe" class="code-anchor">json</a></code> pipe is particularly helpful for debugging bindings:</p><code-example path="template-expression-operators/src/app/app.component.html" region="json-pipe" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;p&gt;Item json pipe: {{<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a> | <a href="api/common/JsonPipe" class="code-anchor">json</a>}}&lt;/p&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;p&gt;</span><span class="pln">Item json pipe: {{</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="pln">item</span></a><span class="pln"> | </span><a href="api/common/JsonPipe" class="code-anchor"><span class="pln">json</span></a><span class="pln">}}</span><span class="tag">&lt;/p&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">生成的输出如下所示：</p><p translation-origin="off">The generated output would look something like this:</p><code-example language="json" ng-version="9.0.0-rc.11"><div style="display:none">{ "name": "Telephone", "manufactureDate": "1980-02-25T05:00:00.000Z", "price": 98 }</div><aio-code><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pun">{</span><span class="pln"> </span><span class="str">"name"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Telephone"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"manufactureDate"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"1980-02-25T05:00:00.000Z"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"price"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">98</span><span class="pln"> </span><span class="pun">}</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p translation-result="on">管道运算符的优先级比三元运算符（ <code>?:</code> ）高，这意味着 <code>a ? b : c | x</code> 将被解析为 <code>a ? b : (c | x)</code> 。但是，由于多种原因，如果在 <code>?:</code> 的第一和第二操作数中没有括号，则不能使用管道运算符。一个较好的做法是在第三个操作数中也使用括号。</p><p translation-origin="off">The pipe operator has a higher precedence than the ternary operator (<code>?:</code>), which means <code>a ? b : c | x</code> is parsed as <code>a ? b : (c | x)</code>. Nevertheless, for a number of reasons, the pipe operator cannot be used without parentheses in the first and second operands of <code>?:</code>. A good practice is to use parentheses in the third operand too.</p></div><hr><a id="safe-navigation-operator"></a><h3 id="the-safe-navigation-operator----and-null-property-paths" translation-result="on">安全导航运算符（ <code>?</code> ）和空属性路径<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#the-safe-navigation-operator----and-null-property-paths"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="the-safe-navigation-operator----and-null-property-paths">The safe navigation operator ( <code>?</code> ) and null property paths<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#the-safe-navigation-operator----and-null-property-paths"><i class="material-icons">link</i></a></h3><p translation-result="on">Angular 安全导航运算符 <code>?</code> 可以对在属性路径中出现 <code>null</code> 和 <code>undefined</code> 值进行保护。在这里，如果 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 为 <code>null</code> ，它可以防止视图渲染失败。</p><p translation-origin="off">The Angular safe navigation operator, <code>?</code>, guards against <code>null</code> and <code>undefined</code> values in property paths. Here, it protects against a view render failure if <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> is <code>null</code>.</p><code-example path="template-expression-operators/src/app/app.component.html" region="safe" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;p&gt;The <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a> name is: {{<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>?.name}}&lt;/p&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;p&gt;</span><span class="pln">The </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="pln">item</span></a><span class="pln"> name is: {{</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="pln">item</span></a><span class="pln">?.name}}</span><span class="tag">&lt;/p&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">如果 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 为 <code>null</code>，则视图仍然渲染，但显示的值为空白；您只会看到 “The item name is:” ，后面没有任何内容。</p><p translation-origin="off">If <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> is <code>null</code>, the view still renders but the displayed value is blank; you see only "The item name is:" with nothing after it.</p><p translation-result="on">考虑接下来这个带有 <code>nullItem</code> 的例子。</p><p translation-origin="off">Consider the next example, with a <code>nullItem</code>.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">The null <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a> name is {{nullItem.name}}</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">The null </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="pln">item</span></a><span class="pln"> name is {{nullItem.name}}</span></code>
    </pre></aio-code></code-example><p translation-result="on">由于没有安全导航运算符，并且 <code>nullItem</code> 为 <code>null</code> ，因此 JavaScript 和 Angular 会引发空指针错误并中断 Angular 的渲染过程：</p><p translation-origin="off">Since there is no safe navigation operator and <code>nullItem</code> is <code>null</code>, JavaScript and Angular would throw a <code>null</code> reference error and break the rendering process of Angular:</p><code-example language="bash" ng-version="9.0.0-rc.11"><div style="display:none">TypeError: Cannot read property 'name' of null.</div><aio-code><pre class="lang-bash prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="typ">TypeError</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Cannot</span><span class="pln"> read property </span><span class="str">'name'</span><span class="pln"> of null</span><span class="pun">.</span></code>
    </pre></aio-code></code-example><p translation-result="on">但是，有时在某些情况下，属性路径中的 <code>null</code> 值可能是可接受的，尤其是当该值开始时为空但数据最终会到达时。</p><p translation-origin="off">Sometimes however, <code>null</code> values in the property path may be OK under certain circumstances, especially when the value starts out null but the data arrives eventually.</p><p translation-result="on">使用安全导航运算符 <code>?</code>，当 Angular 表达式遇到第一个空值时，它将停止对表达式的求值，并渲染出无错误的视图。</p><p translation-origin="off">With the safe navigation operator, <code>?</code>, Angular stops evaluating the expression when it hits the first <code>null</code> value and renders the view without errors.</p><p translation-result="on">在像 <code>a?.b?.c?.d</code> 这样的长属性路径中，它工作得很完美。</p><p translation-origin="off">It works perfectly with long property paths such as <code>a?.b?.c?.d</code>.</p><hr><a id="non-null-assertion-operator"></a><h3 id="the-non-null-assertion-operator---" translation-result="on">非空断言运算符（<code>!</code>）<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#the-non-null-assertion-operator---"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="the-non-null-assertion-operator---">The non-null assertion operator ( <code>!</code> )<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#the-non-null-assertion-operator---"><i class="material-icons">link</i></a></h3><p translation-result="on">在 TypeScript 2.0 中，你可以使用 <code>--strictNullChecks</code> 标志强制开启<a href="http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html" title="Strict null checking in TypeScript">严格空值检查</a>。TypeScript 就会确保不存在意料之外的 null 或 undefined。</p><p translation-origin="off">As of Typescript 2.0, you can enforce <a href="http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html" title="Strict null checking in TypeScript">strict null checking</a> with the <code>--strictNullChecks</code> flag. TypeScript then ensures that no variable is unintentionally null or undefined.</p><p translation-result="on">在这种模式下，有类型的变量默认是不允许 <code>null</code> 或 <code>undefined</code> 值的，如果有未赋值的变量，或者试图把 <code>null</code> 或 <code>undefined</code> 赋值给不允许为空的变量，类型检查器就会抛出一个错误。</p><p translation-origin="off">In this mode, typed variables disallow <code>null</code> and <code>undefined</code> by default. The type checker throws an error if you leave a variable unassigned or try to assign <code>null</code> or <code>undefined</code> to a variable whose type disallows <code>null</code> and <code>undefined</code>.</p><p translation-result="on">如果无法在运行类型检查器期间确定变量是否 <code>null</code> 或 <code>undefined</code>，则会抛出错误。您可以通过应用后缀<a href="http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator" title="非空断言运算符">非空断言运算符!</a>来告诉类型检查器不要抛出错误。</p><p translation-origin="off">The type checker also throws an error if it can't determine whether a variable will be <code>null</code> or undefined at runtime. You tell the type checker not to throw an error by applying the postfix <a href="http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator" title="Non-null assertion operator">non-null assertion operator, !</a>.</p><p translation-result="on">Angular 的非空断言运算符 <code>!</code> 在 Angular 模板中具有相同的目的。例如，在使用 <a href="guide/template-syntax#ngIf"><code>*ngIf</code></a>检查过 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 是否已定义之后，就可以断言 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 属性也已定义。</p><p translation-origin="off">The Angular non-null assertion operator, <code>!</code>, serves the same purpose in an Angular template. For example, after you use <a href="guide/template-syntax#ngIf">*ngIf</a> to check that <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> is defined, you can assert that <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> properties are also defined.</p><code-example path="template-expression-operators/src/app/app.component.html" region="non-null" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;!--No color, no error --&gt; &lt;p *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>"&gt;The <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>'s color is: {{<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>!.color}}&lt;/p&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">&lt;!--No color, no error --&gt;</span><span class="pln">
</span><span class="tag">&lt;p</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atv">item</span></a><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">The </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="pln">item</span></a><span class="pln">'s color is: {{</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="pln">item</span></a><span class="pln">!.color}}</span><span class="tag">&lt;/p&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">当 Angular 编译器把你的模板转换成 TypeScript 代码时，它会防止 TypeScript 不要报告此 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 可能为 <code>null</code> 或 <code>undefined</code> 的错误。</p><p translation-origin="off">When the Angular compiler turns your template into TypeScript code, it prevents TypeScript from reporting that <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> might be <code>null</code> or <code>undefined</code>.</p><p translation-result="on">与<a href="guide/template-syntax#safe-navigation-operator" title="Safe naviation operator (?.)"><em>安全导航运算符</em></a>不同的是，<strong>非空断言运算符</strong>不会防止出现 null 或 undefined。 它只是告诉 TypeScript 的类型检查器对特定的属性表达式，不做 "严格空值检测"。</p><p translation-origin="off">Unlike the <a href="guide/template-syntax#safe-navigation-operator" title="Safe navigation operator (?)"><em>safe navigation operator</em></a>, the non-null assertion operator does not guard against <code>null</code> or <code>undefined</code>. Rather, it tells the TypeScript type checker to suspend strict <code>null</code> checks for a specific property expression.</p><p translation-result="on">非空断言运算符 <code>!</code> ，是可选的，但在打开严格空检查选项时必须使用它。</p><p translation-origin="off">The non-null assertion operator, <code>!</code>, is optional with the exception that you must use it when you turn on strict null checks.</p><p translation-result="on"><a href="guide/template-syntax#top-of-page">回到顶部</a></p><p translation-origin="off"><a href="guide/template-syntax#top-of-page">back to top</a></p><hr><a id="built-in-template-functions"></a><h2 id="built-in-template-functions" translation-result="on">内置模板函数<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#built-in-template-functions"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="built-in-template-functions">Built-in template functions<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#built-in-template-functions"><i class="material-icons">link</i></a></h2><a id="any-type-cast-function"></a><h3 id="the-any-type-cast-function" translation-result="on">类型转换函数 <code>$any()</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#the-any-type-cast-function"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="the-any-type-cast-function">The <code>$any()</code> type cast function<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#the-any-type-cast-function"><i class="material-icons">link</i></a></h3><p translation-result="on">有时候，绑定表达式可能会在 <a href="guide/aot-compiler">AOT 编译</a>时报类型错误，并且它不能或很难指定类型。要消除这种报错，你可以使用 <code>$any()</code> 转换函数来把表达式转换成 <a href="http://www.typescriptlang.org/docs/handbook/basic-types.html#any"><code>any</code> 类型</a>，范例如下：</p><p translation-origin="off">Sometimes a binding expression triggers a type error during <a href="guide/aot-compiler">AOT compilation</a> and it is not possible or difficult to fully specify the type. To silence the error, you can use the <code>$any()</code> cast function to cast the expression to the <a href="http://www.typescriptlang.org/docs/handbook/basic-types.html#any"><code>any</code> type</a> as in the following example:</p><code-example path="built-in-template-functions/src/app/app.component.html" region="any-type-cast-function-1" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;p&gt;The <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>'s undeclared best by date is: {{$any(<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>).bestByDate}}&lt;/p&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;p&gt;</span><span class="pln">The </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="pln">item</span></a><span class="pln">'s undeclared best by date is: {{$any(</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="pln">item</span></a><span class="pln">).bestByDate}}</span><span class="tag">&lt;/p&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">当 Angular 编译器把模板转换成 TypeScript 代码时，<code>$any</code> 表达式可以防止 TypeScript 编译器在进行类型检查时报错说 <code>bestByDate</code> 不是 <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> 对象的成员。</p><p translation-origin="off">When the Angular compiler turns this template into TypeScript code, it prevents TypeScript from reporting that <code>bestByDate</code> is not a member of the <code><a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a></code> object when it runs type checking on the template.</p><p translation-result="on"><code>$any()</code> 转换函数可以和 <code>this</code> 联合使用，以便访问组件中未声明过的成员。</p><p translation-origin="off">The <code>$any()</code> cast function also works with <code>this</code> to allow access to undeclared members of the component.</p><code-example path="built-in-template-functions/src/app/app.component.html" region="any-type-cast-function-2" header="src/app/app.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;p&gt;The <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>'s undeclared best by date is: {{$any(this).bestByDate}}&lt;/p&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;p&gt;</span><span class="pln">The </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="pln">item</span></a><span class="pln">'s undeclared best by date is: {{$any(this).bestByDate}}</span><span class="tag">&lt;/p&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on"><code>$any()</code> 转换函数可以用在绑定表达式中任何可以进行方法调用的地方。</p><p translation-origin="off">The <code>$any()</code> cast function works anywhere in a binding expression where a method call is valid.</p><h2 id="svg-in-templates" translation-result="on">模板中的 SVG<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#svg-in-templates"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="svg-in-templates">SVG in templates<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/template-syntax#svg-in-templates"><i class="material-icons">link</i></a></h2><p translation-result="on">可以将 SVG 用作 Angular 中的有效模板。以下所有模板语法均适用于 SVG 和 HTML。在 SVG <a href="https://www.w3.org/TR/SVG11/">1.1</a>和<a href="https://www.w3.org/TR/SVG2/">2.0</a> 规范中了解更多信息。</p><p translation-origin="off">It is possible to use SVG as valid templates in Angular. All of the template syntax below is applicable to both SVG and HTML. Learn more in the SVG <a href="https://www.w3.org/TR/SVG11/">1.1</a> and <a href="https://www.w3.org/TR/SVG2/">2.0</a> specifications.</p><p translation-result="on">为什么要用 SVG 作为模板，而不是简单地将其作为图像添加到应用程序中？</p><p translation-origin="off">Why would you use SVG as template, instead of simply adding it as image to your application?</p><p translation-result="on">当您使用 SVG 作为模板时，就可以像 HTML 模板一样使用指令和绑定。这意味着您将能够动态生成交互式图形。</p><p translation-origin="off">When you use an SVG as the template, you are able to use directives and bindings just like with HTML templates. This means that you will be able to dynamically generate interactive graphics.</p><p translation-result="on">有关语法示例，请参见下面的示例代码片段：</p><p translation-origin="off">Refer to the sample code snippet below for a syntax example:</p><code-example path="template-syntax/src/app/svg.component.ts" header="src/app/svg.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a> } from '@angular/core'; @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'app-svg', <a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a>: './svg.component.svg', <a href="api/core/Component#styleUrls" class="code-anchor">styleUrls</a>: ['./svg.component.css'] }) export class SvgComponent { fillColor = 'rgb(255, 0, 0)'; changeColor() { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); this.fillColor = `rgb(${r}, ${g}, ${b})`; } }</div><header class="ng-star-inserted">src/app/svg.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/svg.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app-svg'</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/Component#templateUrl" class="code-anchor"><span class="pln">templateUrl</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'./svg.component.svg'</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/Component#styleUrls" class="code-anchor"><span class="pln">styleUrls</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'./svg.component.css'</span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">SvgComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  fillColor </span><span class="pun">=</span><span class="pln"> </span><span class="str">'rgb(255, 0, 0)'</span><span class="pun">;</span><span class="pln">

  changeColor</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">const</span><span class="pln"> r </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">floor</span><span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="lit">256</span><span class="pun">);</span><span class="pln">
    </span><span class="kwd">const</span><span class="pln"> g </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">floor</span><span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="lit">256</span><span class="pun">);</span><span class="pln">
    </span><span class="kwd">const</span><span class="pln"> b </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">floor</span><span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="lit">256</span><span class="pun">);</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">fillColor </span><span class="pun">=</span><span class="pln"> </span><span class="str">`rgb(${r}, ${g}, ${b})`</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">将以下代码添加到您的 <code>svg.component.svg</code> 文件中：</p><p translation-origin="off">Add the following code to your <code>svg.component.svg</code> file:</p><code-example path="template-syntax/src/app/svg.component.svg" header="src/app/svg.component.svg" ng-version="9.0.0-rc.11"><div style="display:none">&lt;svg&gt; &lt;g&gt; &lt;rect x="0" y="0" width="100" height="100" [attr.fill]="fillColor" (click)="changeColor()" /&gt; &lt;text x="120" y="50"&gt;click the rectangle to change the fill color&lt;/text&gt; &lt;/g&gt; &lt;/svg&gt;</div><header class="ng-star-inserted">src/app/svg.component.svg</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/svg.component.svg">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;svg&gt;</span><span class="pln">
  </span><span class="tag">&lt;g&gt;</span><span class="pln">
    </span><span class="tag">&lt;rect</span><span class="pln"> </span><span class="atn">x</span><span class="pun">=</span><span class="atv">"0"</span><span class="pln"> </span><span class="atn">y</span><span class="pun">=</span><span class="atv">"0"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"100"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"100"</span><span class="pln"> [</span><span class="atn">attr</span><span class="pln">.</span><span class="atn">fill</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"fillColor"</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"changeColor()"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;text</span><span class="pln"> </span><span class="atn">x</span><span class="pun">=</span><span class="atv">"120"</span><span class="pln"> </span><span class="atn">y</span><span class="pun">=</span><span class="atv">"50"</span><span class="tag">&gt;</span><span class="pln">click the rectangle to change the fill color</span><span class="tag">&lt;/text&gt;</span><span class="pln">
  </span><span class="tag">&lt;/g&gt;</span><span class="pln">
</span><span class="tag">&lt;/svg&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">在这里，您可以看到事件绑定语法 <code>click()</code> 和属性绑定语法（<code>[attr.fill]="fillColor"</code>）的用法。</p><p translation-origin="off">Here you can see the use of a <code>click()</code> event binding and the property binding syntax (<code>[attr.fill]="fillColor"</code>).</p></div></div></aio-doc-viewer></main></mat-sidenav-content></mat-sidenav-container><div class="toc-container no-print ng-star-inserted"><aio-lazy-ce selector="aio-toc"><aio-toc ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><ul class="toc-list"><li class="h1 ng-star-inserted active" title="模板语法"><a href="guide/template-syntax#template-syntax">模板语法</a></li><li class="h2 ng-star-inserted" title="模板中的 HTML"><a href="guide/template-syntax#html-in-templates">模板中的 HTML</a></li><li class="h2 ng-star-inserted" title="插值与模板表达式"><a href="guide/template-syntax#interpolation-and-template-expressions">插值与模板表达式</a></li><li class="h3 ng-star-inserted" title="插值 {{...}}"><a href="guide/template-syntax#interpolation-">插值 <code>{{...}}</code></a></li><li class="h3 ng-star-inserted" title="模板表达式"><a href="guide/template-syntax#template-expressions">模板表达式</a></li><li class="h3 ng-star-inserted" title="表达式上下文"><a href="guide/template-syntax#expression-context">表达式上下文</a></li><li class="h3 ng-star-inserted" title="表达式使用指南"><a href="guide/template-syntax#expression-guidelines">表达式使用指南</a></li><li class="h2 ng-star-inserted" title="模板语句"><a href="guide/template-syntax#template-statements">模板语句</a></li><li class="h3 ng-star-inserted" title="语句上下文"><a href="guide/template-syntax#statement-context">语句上下文</a></li><li class="h3 ng-star-inserted" title="语句指南"><a href="guide/template-syntax#statement-guidelines">语句指南</a></li><li class="h2 ng-star-inserted" title="绑定语法：概览"><a href="guide/template-syntax#binding-syntax-an-overview">绑定语法：概览</a></li><li class="h3 ng-star-inserted" title="数据绑定与 HTML"><a href="guide/template-syntax#data-binding-and-html">数据绑定与 HTML</a></li><li class="h3 ng-star-inserted" title="HTML attribute 与 DOM property 的对比"><a href="guide/template-syntax#html-attribute-vs-dom-property">HTML attribute 与 DOM property 的对比</a></li><li class="h2 ng-star-inserted" title="绑定类型与绑定目标"><a href="guide/template-syntax#binding-types-and-targets">绑定类型与绑定目标</a></li><li class="h2 ng-star-inserted" title="Property 绑定 [property]"><a href="guide/template-syntax#property-binding-property">Property 绑定 <code>[property]</code></a></li><li class="h3 ng-star-inserted" title="单向输入"><a href="guide/template-syntax#one-way-in">单向<em>输入</em></a></li><li class="h3 ng-star-inserted" title="例子"><a href="guide/template-syntax#examples">例子</a></li><li class="h3 ng-star-inserted" title="绑定目标"><a href="guide/template-syntax#binding-targets">绑定目标</a></li><li class="h3 ng-star-inserted" title="消除副作用"><a href="guide/template-syntax#avoid-side-effects">消除副作用</a></li><li class="h3 ng-star-inserted" title="返回正确的类型"><a href="guide/template-syntax#return-the-proper-type">返回正确的类型</a></li><li class="h3 ng-star-inserted" title="别忘了方括号"><a href="guide/template-syntax#remember-the-brackets">别忘了方括号</a></li><li class="h3 ng-star-inserted" title="一次性字符串初始化"><a href="guide/template-syntax#one-time-string-initialization">一次性字符串初始化</a></li><li class="h3 ng-star-inserted" title="属性绑定与插值"><a href="guide/template-syntax#property-binding-vs-interpolation">属性绑定与插值</a></li><li class="h3 ng-star-inserted" title="内容安全"><a href="guide/template-syntax#content-security">内容安全</a></li><li class="h2 ng-star-inserted" title="attribute、class 和 style 绑定"><a href="guide/template-syntax#attribute-class-and-style-bindings">attribute、class 和 style 绑定</a></li><li class="h3 ng-star-inserted" title="attribute 绑定"><a href="guide/template-syntax#attribute-binding">attribute 绑定</a></li><li class="h3 ng-star-inserted" title="类绑定"><a href="guide/template-syntax#class-binding">类绑定</a></li><li class="h3 ng-star-inserted" title="样式绑定"><a href="guide/template-syntax#style-binding">样式绑定</a></li><li class="h3 ng-star-inserted" title="样式的优先级规则"><a href="guide/template-syntax#styling-precedence">样式的优先级规则</a></li><li class="h3 ng-star-inserted" title="委托优先级较低的样式"><a href="guide/template-syntax#delegating-to-styles-with-lower-precedence">委托优先级较低的样式</a></li><li class="h2 ng-star-inserted" title="事件绑定 (event)"><a href="guide/template-syntax#event-binding-event">事件绑定 <code>(event)</code></a></li><li class="h3 ng-star-inserted" title="目标事件"><a href="guide/template-syntax#target-event">目标事件</a></li><li class="h3 ng-star-inserted" title="$event 和事件处理语句"><a href="guide/template-syntax#event-and-event-handling-statements"><em>$event</em> 和事件处理语句</a></li><li class="h3 ng-star-inserted" title="使用 EventEmitter 实现自定义事件"><a href="guide/template-syntax#custom-events-with-eventemitter">使用 <code>EventEmitter</code> 实现自定义事件</a></li><li class="h3 ng-star-inserted" title="模板语句有副作用"><a href="guide/template-syntax#template-statements-have-side-effects">模板语句有副作用</a></li><li class="h2 ng-star-inserted" title="双向绑定 [(...)]"><a href="guide/template-syntax#two-way-binding-">双向绑定 <code>[(...)]</code></a></li><li class="h3 ng-star-inserted" title="双向绑定的基础知识"><a href="guide/template-syntax#basics-of-two-way-binding">双向绑定的基础知识</a></li><li class="h3 ng-star-inserted" title="表单中的双向绑定"><a href="guide/template-syntax#two-way-binding-in-forms">表单中的双向绑定</a></li><li class="h2 ng-star-inserted" title="内置指令"><a href="guide/template-syntax#built-in-directives">内置指令</a></li><li class="h3 ng-star-inserted" title="内置属性型指令"><a href="guide/template-syntax#built-in-attribute-directives">内置属性型指令</a></li><li class="h3 ng-star-inserted" title="NgClass"><a href="guide/template-syntax#ngclass"><code>NgClass</code></a></li><li class="h3 ng-star-inserted" title="NgStyle"><a href="guide/template-syntax#ngstyle"><code>NgStyle</code></a></li><li class="h3 ng-star-inserted" title="[(ngModel)] ：双向绑定"><a href="guide/template-syntax#ngmodel-two-way-binding"><code>[(ngModel)]</code> ：双向绑定</a></li><li class="h2 ng-star-inserted" title="内置结构型指令"><a href="guide/template-syntax#built-in-structural-directives">内置<em>结构型</em>指令</a></li><li class="h3 ng-star-inserted" title="NgIf"><a href="guide/template-syntax#ngif">NgIf</a></li><li class="h3 ng-star-inserted" title="NgFor"><a href="guide/template-syntax#ngfor"><code>NgFor</code></a></li><li class="h2 ng-star-inserted" title="NgSwitch 指令"><a href="guide/template-syntax#the-ngswitch-directives"><code>NgSwitch</code> 指令</a></li><li class="h2 ng-star-inserted" title="模板引用变量（ #var ）"><a href="guide/template-syntax#template-reference-variables-var">模板引用变量（ <code>#var</code> ）</a></li><li class="h2 ng-star-inserted" title="输入和输出属性"><a href="guide/template-syntax#input-and-output-properties">输入和输出属性</a></li><li class="h2 ng-star-inserted" title="如何使用 @Input()"><a href="guide/template-syntax#how-to-use-input">如何使用 <code>@Input()</code></a></li><li class="h3 ng-star-inserted" title="在子组件中"><a href="guide/template-syntax#in-the-child">在子组件中</a></li><li class="h3 ng-star-inserted" title="在父组件中"><a href="guide/template-syntax#in-the-parent">在父组件中</a></li><li class="h2 ng-star-inserted" title="如何使用 @Output()"><a href="guide/template-syntax#how-to-use-output">如何使用 <code>@Output()</code></a></li><li class="h3 ng-star-inserted" title="在子组件中"><a href="guide/template-syntax#in-the-child-1">在子组件中</a></li><li class="h3 ng-star-inserted" title="在父组件中"><a href="guide/template-syntax#in-the-parent-1">在父组件中</a></li><li class="h2 ng-star-inserted" title="@Input() 和 @Output() 在一起"><a href="guide/template-syntax#input-and-output-together"><code>@Input()</code> 和 <code>@Output()</code> 在一起</a></li><li class="h2 ng-star-inserted" title="@Input() 和 @Output() 声明"><a href="guide/template-syntax#input-and-output-declarations"><code>@Input()</code> 和 <code>@Output()</code> 声明</a></li><li class="h2 ng-star-inserted" title="为输入和输出指定别名"><a href="guide/template-syntax#aliasing-inputs-and-outputs">为输入和输出指定别名</a></li><li class="h3 ng-star-inserted" title="元数据中的别名"><a href="guide/template-syntax#aliasing-in-the-metadata">元数据中的别名</a></li><li class="h3 ng-star-inserted" title="使用 @Input() / @Output() 装饰器指定别名"><a href="guide/template-syntax#aliasing-with-the-inputoutput-decorator">使用 <code>@Input()</code> / <code>@Output()</code> 装饰器指定别名</a></li><li class="h2 ng-star-inserted" title="模板表达式中的运算符"><a href="guide/template-syntax#template-expression-operators">模板表达式中的运算符</a></li><li class="h3 ng-star-inserted" title="管道运算符（ | ）"><a href="guide/template-syntax#the-pipe-operator-">管道运算符（ <code>|</code> ）</a></li><li class="h3 ng-star-inserted" title="安全导航运算符（ ? ）和空属性路径"><a href="guide/template-syntax#the-safe-navigation-operator----and-null-property-paths">安全导航运算符（ <code>?</code> ）和空属性路径</a></li><li class="h3 ng-star-inserted" title="非空断言运算符（!）"><a href="guide/template-syntax#the-non-null-assertion-operator---">非空断言运算符（<code>!</code>）</a></li><li class="h2 ng-star-inserted" title="内置模板函数"><a href="guide/template-syntax#built-in-template-functions">内置模板函数</a></li><li class="h3 ng-star-inserted" title="类型转换函数 $any()"><a href="guide/template-syntax#the-any-type-cast-function">类型转换函数 <code>$any()</code></a></li><li class="h2 ng-star-inserted" title="模板中的 SVG"><a href="guide/template-syntax#svg-in-templates">模板中的 SVG</a></li></ul></div></aio-toc></aio-lazy-ce></div><footer class="no-print"><aio-footer><div class="grid-fluid"><div class="footer-block ng-star-inserted"><h3>资源</h3><ul><li class="ng-star-inserted"><a class="link" href="about" title="Angular 贡献者。">关于</a></li><li class="ng-star-inserted"><a class="link" href="resources" title="网络上的 Angular 工具、培训、博客等">资源列表</a></li><li class="ng-star-inserted"><a class="link" href="presskit" title="我们的联系方式、LOGO 和品牌">宣传资料</a></li><li class="ng-star-inserted"><a class="link" href="https://blog.angular.io/" title="Angular 官方博客">博客</a></li><li class="ng-star-inserted"><a class="link" href="analytics" title="Angular 使用情况分析">使用情况分析</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>帮助</h3><ul><li class="ng-star-inserted"><a class="link" href="https://stackoverflow.com/questions/tagged/angular" title="Stack Overflow: 这里的社区会回答你关于 Angular 的技术问题">Stack Overflow</a></li><li class="ng-star-inserted"><a class="link" href="https://gitter.im/angular/angular" title="和老鸟聊 Angular">Gitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular/issues" title="在 github 上报告问题和建议。">报告问题</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md" title="让我们彼此尊重">行为规范</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>社区</h3><ul><li class="ng-star-inserted"><a class="link" href="events" title="Angular events around the world.">活动</a></li><li class="ng-star-inserted"><a class="link" href="http://www.meetup.com/topics/angularjs/" title="参加聚会，向别的开发人员学习">聚会</a></li><li class="ng-star-inserted"><a class="link" href="https://twitter.com/angular" title="Twitter">Twitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular" title="GitHub">GitHub</a></li><li class="ng-star-inserted"><a class="link" href="contribute" title="向 Angular 做贡献">做贡献</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>多语言</h3><ul><li class="ng-star-inserted"><a class="link" href="https://angular.io/" title="English Version.">English Version</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.tw/" title="正體中文版">正體中文版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.jp/" title="日本語版">日本語版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.kr/" title="한국어">한국어</a></li></ul></div></div><p>Super-powered by Google ©2010-2020. 代码授权方式：<a href="license" title="License text">MIT-style License</a>. 文档授权方式：<a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</p><p>当前版本：9.0.1-build.109+sha.7a49faba.</p></aio-footer></footer><div class="cdk-visually-hidden ng-star-inserted"><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color" aria-hidden="true">&nbsp;</mat-icon></div></aio-shell><noscript><div class="background-sky hero"></div><section id="intro" style="text-shadow:1px 1px #1976d2"><div class="hero-logo"><img src="assets/images/logos/angular/angular.svg" width="250" height="250" alt="Angular"></div><div class="homepage-container"><div class="hero-headline">一套框架，多种平台<br>移动 &amp; 桌面</div></div></section><h2 style="color:red;margin-top:40px;position:relative;text-align:center;text-shadow:1px 1px #fafafa"><b><i>该网站需要浏览器支持 JavaScript</i></b></h2></noscript><script src="runtime-es2015.811b066977719df5af39.js" type="module"></script><script src="runtime-es5.811b066977719df5af39.js" nomodule="" defer=""></script><script src="polyfills-es5.1494ca908613f3429457.js" nomodule="" defer=""></script><script src="polyfills-es2015.9057a05c650bf60ecbf4.js" type="module"></script><script src="main-es2015.4e9aa34b562bab1382ab.js" type="module"></script><script src="main-es5.4e9aa34b562bab1382ab.js" nomodule="" defer=""></script><div class="cdk-live-announcer-element cdk-visually-hidden" aria-atomic="true" aria-live="polite"></div></body></html>